欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

异步编程解决方案

程序员文章站 2022-04-15 17:32:14
...
  • 回调地狱
this.$http.post(url).then(res => {
	this.$http.post(url1).then(res1 => {
		this.$http.post(url2).then(res2 => {
			...
		});
	});
});
  • 使用Promise
// resolve成功 reject失败
function init() {
	return new Promise((resolve, reject) => {
		this.$http.post(url).then(res => {
			resolve(res);
		}).catch(err => {
			reject(err);
		});
	});
}
init().then(res => {
	// 调取其他方法
	...
}).catch(err => {
	// 抛出异常
	...
})
  • Promise.all()
// 多个异步操作都执行完之后,再执行其他方法
function getList1() {
	return new Promise((resolve, reject) => {
		this.$http.post(url).then(res => {
			resolve(res);
		}).catch(err => {
			reject(err);
		});
	})
}
function getList2() {
	return new Promise((resolve, reject) => {
		this.$http.post(url).then(res => {
			resolve(res);
		}).catch(err => {
			reject(err);
		});
	})
}
function init() {
	Promise.all([getList1, getList2]).then(res => {
		console.log(res); // [...] 方法都成功,进入res
	}).catch(err => {
		console.log(err); // 只要有一个失败,直接进入err
	})
}
  • 结合async/await按顺序执行
function getList1() {
	return new Promise((resolve, reject) => {
		this.$http.post(url).then(res => {
			resolve(res);
		}).catch(err => {
			reject(err);
		});
	})
}
function getList2() {
	return new Promise((resolve, reject) => {
		this.$http.post(url).then(res => {
			resolve(res);
		}).catch(err => {
			reject(err);
		});
	})
}
async function init() {
	const res1 = await getList1();
	const res2 = await getList2();
}