Skip to content

async await :异步的最终解决方案

下面一段代码(vue2)将演示如何将异步请求同步化处理

js
export default {
	components: {
		forLoopFn: async function () {
			for (let i = 0; i < this.list.length; i++) {
				await this.testPromise() // 模拟请求,等待1秒
				this.list[i].color_2 = 'green'
			}
		},
		testPromise: async function () {
			const p = await new Promise((resolve, reject) => {
				setTimeout(() => {
					resolve('resolve的返回值')
				}, 1000)
			}).then(res => {
				console.log(res)
			})
		},
	}
}
export default {
	components: {
		forLoopFn: async function () {
			for (let i = 0; i < this.list.length; i++) {
				await this.testPromise() // 模拟请求,等待1秒
				this.list[i].color_2 = 'green'
			}
		},
		testPromise: async function () {
			const p = await new Promise((resolve, reject) => {
				setTimeout(() => {
					resolve('resolve的返回值')
				}, 1000)
			}).then(res => {
				console.log(res)
			})
		},
	}
}