异步编程解决方案
程序员文章站
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();
}
上一篇: 解决异步的方案---回调函数
下一篇: 浅谈几个前端异步解决方案