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>