VUE3 网络异步操作的两种方式

描述

开发过程中，我需要先通过网络请求1获取一个值，通过得到的值去作为网络请求2 的输入。如代码所示：

// 请求1，得到number1.value
api.diagnose({state:"readwave", index:index}).then(res =>{
	number1.value = res.data.unique_number
})

// 请求2，输入number1.value
api.showimage(number1.value).then(res =>{
	// somthing
})

这样做可能问题是：网络请求1的值已经获取了，但因为种种原因，赋值的过程落后于网络请求2输入。导致网络请求2用一个空值发出请求，于是代码报错。

异步操作，嵌套请求

修改代码，直接将网络请求2嵌套到请求1：

// 请求1，得到number1.value
api.diagnose({state:"readwave", index:index}).then(res =>{
	number1.value = res.data.unique_number

	// 请求2，输入number1.value
	api.showimage(number1.value).then(res =>{
		// somthing
	})
})

异步操作，async/await

修改代码，使用async/await机制

async function xxxx(){
	const request1 = await api.diagnose({state:"readwave", index:index})
	number1.value = request1.data.unique_number
	const request2 = await api.diagnose(number1.value)
	// something = request2.data
}

总结

实际使用两种方式均可，暂时没有体验到感受上的太大差别