讲的太精辟了,点击查看原文连接
使用场景:菜单列表的加载、联动目录的加载(二级目录的展示需要依赖一级目录)
promise的2个参数(resolve,reject) 和 3个状态(pending ,fulfilled/resolved,rejected)
Promise是一个构造函数,使用new Promise()得到一个实例,new Promise()需要传进去一个函数,这个函数有2个参数:
一个是resolve回调函数,在异步操作成功时调用,把promise的状态从pending转变到fulfilled(又称resolved),并将异步操作的结果,作为参数传递出去
一个是reject回调函数,在异步操作失败时调用,把Promise的状态从从 pending 变为 rejected,并将异步操作报出的错误,作为参数传递出去
比如这样的场景,调用promise1 , 使用promise1的返回结果去调用promise2,然后使用两者的结果去调用promise3
const maskRequest = () =>{
return promise1().then(res1=>{
return promise2(res1).then(res2=>{
return promise3(res1,res2)
})
})
}
const maskRrequest = async()=>{
const res1 = await promise1()
const res2 = await promoise2(res1)
return await promise( res1 , res2 )
}
调试:async/await让代码调试变得简单。2个理由使得promise调试很痛苦
1、promise不能在返回表达式的箭头函数中设置断点
2、如果你在.then代码块中设置断点,进入下一步的话,调试器不会跳到下一个.then,因为他只会跳过异步代码。
3、使用async/await时,不在需要那么多的箭头函数,这样调试就像调试同步代码一样。
const fun = async () => {
return 'hello';
};
fun().then(result => console.log(result)) // hello
const fun1 = new Promise((resolve)=>{
console.log(6666)
setTimeout(()=>{
resolve(9999)
},2000)
})
fun1.then(result => console.log(result)) // 6666 两秒后打印 999
var arr = [];
new Promise(resolve => {
res.data.map((item, index) => {
arr[index] = {
...item,
icon: `icon${index + 8}.png`,
};
});
resolve();
}).then(()=>{
this.nav = arr;
})
跟promise对象
跟普通值
异步函数
捕获异常