场景:假设有4个异步方法要按顺序调用
1. 嵌套调用
为了顺序调用接口,出现多重嵌套,也就出现了俗称的 “回调地狱”;
ajaxA("xxxx", ()=> {
ajaxB("xxxx", ()=> {
ajaxC("xxxx", ()=> {
ajaxD("xxxx", ()=> {
//处理data
XXXXXXX
})
})
})
})
2. Promise链式调用
new Promise(function(resolve){
ajaxA("xxxx", ()=> { resolve(); })
}).then(function(){
return new Promise(function(resolve){
ajaxB("xxxx", ()=> { resolve(); })
})
}).then(function(){
return new Promise(function(resolve){
ajaxC("xxxx", ()=> { resolve(); })
})
}).then(function(){
ajaxD("xxxx");
}).catch(() => {
console.log('Error')
}) ;
// 简化一下代码,将请求改造成一个通用函数
function request(options) {
//.....
return new Promise(....); //使用Promise执行请求,并返回Promise对象
}
request("ajaxA").then(
(data1)=>{
//处理data
return request("ajaxB", data1);
}).then(
(data2)=>{
//处理data
return request("ajaxC", data2)
}).then(
(data3)=>{
//处理data
return request("ajaxD", data3)
})
3. async 和 await
function request(options) {
//.....
return new Promise(....); //使用Promise执行请求,并返回Promise对象
}
async function load(){
//请求失败后的处理, 可以使用try-catch来进行
try{
let data1 = await request("ajaxA");
let data2 = await request("ajaxB", data1);
let data3 = await request("ajaxC", data2);
let data4 = await request("ajaxD", data3);
//await不仅等待Promise完成, 而且还拿到了resolve方法的参数
} catch(e){
//......
}
}
注:async和await要搭配Promise使用, 它进一步极大的改进了Promise的写法
await后面接一个会return new promise的函数并执行它
await只能放在async函数里,async用于定义一个异步函数,该函数返回一个Promise。
异步函数存在以下四种使用形式:
函数声明: async function one() {}
函数表达式: const one = async function() {}
对象的方式: let obj = { async one() {} }
箭头函数: const one = async () => {}
接下来研究下,直接使用的promise 和 async + await + Promise使用 的区别
参考资料:
https://juejin.cn/post/6874974581724020749
https://www.jianshu.com/p/b4fd76c61dc9
https://zhuanlan.zhihu.com/p/112081953