异步编程解决方案

• 回调地狱

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();
}