promise、async和await

讲的太精辟了，点击查看原文连接
使用场景：菜单列表的加载、联动目录的加载（二级目录的展示需要依赖一级目录）

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对象

跟普通值

异步函数

捕获异常