js，uniapp，微信小程序，異步同步問題（終極解決方案Promise + async + await）

當前框架：uni-app

異步解決方案：

1. 使用 Promise
2. 使用 Promise + async + await

我曾經的常規寫法：
存在的問題：代碼量一但多起來，就懵逼了

<template>
	<view class="content">
		
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad() {
			let _this = this
			
			uni.login({
				provider: 'weixin',
				success: function(e) {
					
					uni.request({
						url: 'https://www.fastmock.site/mock/7f2e97ecf7a26f51479a4a08f6c49c8b/test/post/200',
						method: 'post',
						data: {code: e.code},
						success: res => {
							
							uni.request({
								url: 'https://www.fastmock.site/mock/7f2e97ecf7a26f51479a4a08f6c49c8b/test/get/200?name=xxx&age=20',
								method: 'post',
								data: {statusCode: res.statusCode},
								success: res => {
									
								}
							})
							
						}
					})
					
				}
			})
		}
	}
</script>

<style>
</style>

封裝後
存在的問題：不易閱讀，代碼太亂，每次都要聲明下_this，確保能獲取到vue

<template>
	<view class="content">
		
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad() {
			let _this = this
			
			uni.login({
				provider: 'weixin',
				success: function(e) {
					_this.post1(e)
				}
			})
			
		},
		methods: {
			
			post1(e) {
				let _this = this
				
				uni.request({
					url: 'https://www.fastmock.site/mock/7f2e97ecf7a26f51479a4a08f6c49c8b/test/post/200',
					method: 'post',
					data: {code: e.code},
					success: res => {
						_this.post2(res)
					}
				})
			},
			
			post2(res) {
				let _this = this
				
				uni.request({
					url: 'https://www.fastmock.site/mock/7f2e97ecf7a26f51479a4a08f6c49c8b/test/get/200?name=xxx&age=20',
					method: 'post',
					data: {statusCode: res.statusCode},
					success: data => {
						
					}
				})
			}
			
		}
		
	}
</script>

<style>
</style>

使用 Promise
存在的問題：this不用每次都寫了，代碼簡潔些，依舊有些then回調

<template>
	<view class="content">
		
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad() {
			this.unilogim().then(e => {
				this.post1(e).then(res => {
					this.post2(res).then(data => {
						
					})
				})
			})
		},
		methods: {
			
			unilogim() {
				return new Promise(func => {
					uni.login({
						provider: 'weixin',
						success: e => {
							func(e)
						}
					})
				}) 
			},
			
			post1(e) {
				return new Promise(func => {
					uni.request({
						url: 'https://www.fastmock.site/mock/7f2e97ecf7a26f51479a4a08f6c49c8b/test/post/200',
						method: 'post',
						data: {code: e.code},
						success: res => {
							func(res)
						}
					})
				})
			},
			
			post2(res) {
				return new Promise(func => {
					uni.request({
						url: 'https://www.fastmock.site/mock/7f2e97ecf7a26f51479a4a08f6c49c8b/test/get/200?name=xxx&age=20',
						method: 'post',
						data: {statusCode: res.statusCode},
						success: data => {
							func(data)
						}
					})
				})
			}
			
		}
		
	}
</script>

<style>
</style>

使用 Promise + async + await
異步終極解決方案
存在的問題：完全可以同步方式寫啦，但是需要聲明 async 和 await

<template>
	<view class="content">
		
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		onLoad() {
			this.init()
		},
		methods: {
			
			async init() {
				let e = await this.unilogim()
				let ret = await this.post1(e)
				let data = await this.post2(ret)
			},
			
			async unilogim() {
				return new Promise(func => {
					uni.login({
						provider: 'weixin',
						success: e => {
							func(e)
						}
					})
				}) 
			},
			
			async post1(e) {
				return new Promise(func => {
					uni.request({
						url: 'https://www.fastmock.site/mock/7f2e97ecf7a26f51479a4a08f6c49c8b/test/post/200',
						method: 'post',
						data: {code: e.code},
						success: res => {
							func(res)
						}
					})
				})
			},
			
			async post2(res) {
				return new Promise(func => {
					uni.request({
						url: 'https://www.fastmock.site/mock/7f2e97ecf7a26f51479a4a08f6c49c8b/test/get/200?name=xxx&age=20',
						method: 'post',
						data: {statusCode: res.statusCode},
						success: data => {
							func(data)
						}
					})
				})
			}
			
		}
		
	}
</script>

<style>
</style>