async+await详解：async+await教你如何彻底摆脱回调地域，让代码接近同步更简洁（内有B站教学视频）

B站教学视频：async_await详解(彻底摆脱回调地狱)

概要

1. async+await是es2017中的新特性，主流浏览器都已支持；
2. 避免回调地域（多个请求按顺序执行，摆脱嵌套）；
3. 代码更加简洁，看起来更像同步代码；
4. 更优雅，代码执行的速度也会有改观。

准备工作

在这里我先模拟一个请求函数，方便下面代码中直接调用：

async function getData(id=1){
    if(typeof id != 'number'){
        throw new Error('错误类型');
    }
    const result = id==1?{
        a:'我是a1',
        b:'我是b1'
    }:{
        a:'我是a2',
        b:'我是b2'
    }
    return result;
}

基础用法

看起来更像同步代码，按顺序执行：

async function getMyData(){
    const data1 = await getData(1);//await关键字接受一个promise,在promise.resolve的时候就会把值赋给左边的变量,当promise.reject的时候就会抛出错误
    const data2 = await getData(2);
    console.log(data1)
    console.log(data2)
}
getMyData();
// 打印的结果：{a:'我是a1',b:'我是b1'}，{a:'我是a2',b:'我是b2'}

使用async函数的返回值

async function getMyData(id){
    return await getData(id);
}
getMyData(1).then(res=>{
    console.log(res);//轻松的拿到返回值：{a:'我是a1',b:'我是b1'}
})

可以任意类型的函数转成async风格

以上面的函数为例：

• 函数表达式：

const demo = async function (id){
    return await getData(id);
}

• 箭头函数：

const demo = async (id)=>{
    return await getData(id);
}

• class中使用：

class APIdemo{
    async demo(id){
        return await getData(id);
    }
}

• 要知道再全局作用域中使用await是非法的，那么可以怎么处理呢：

(async ()=>{
    const data = await getData(1);
    console.log(data);//轻松的拿到返回值：{a:'我是a1',b:'我是b1'}
})();

处理async函数中的错误

可以利用try{}catch(err){}来捕获

const getData = async (id) => {
    try{
        const data1 = await getData(id);
        console.log(data1)
    }catch(err){
        //捕捉错误信息处理后面的逻辑。。。
        console.error(err)
    }
}
getData('哈哈啊');//由于我们传入的是字符串，函数中需要数字类型，所以会报错，在准备工作中做了处理。

正确处理多个await操作的并行串行

• 串行：

async function getMyData(){
    const data1 = await getData(1);
    const data2 = await getData(2);
    console.log(data1)
    console.log(data2)
}

• 并行(推荐)：这样代码执行速度会比串行的快（有实验验证过）

async function getMyData(){
    const req1 = getData(1);
    const req2 = getData(1);
    const data1 = await req1;
    const data2 = await req2;
    console.log(data1)
    console.log(data2)
}

• 使用Promise.all()让多个await操作并行：

async function getMyData(){
    const [data1,data2] = await Promise.all([
      getData(1),
      getData(2)
    ])
    console.log(data1)
    console.log(data2)
}

结合await和任意兼容.then()的代码

async function getMyData(){
    const num = await 100;
    console.log(num);//100,传的虽然其实有一个隐式的调用，Promise.resolve(100)
}

在循环中使用async+await

并行的体现：

const use = async () => {
    const ids = [1,2];
    <!--for(let i=0;i<ids.length;i++){-->
    <!--    const data = await getData(ids[i]);-->
    <!--    console.log(data);//这样写算是串行，不推荐-->
    <!--}-->
    <!--推荐写法-->
    const promises = ids.map(x=>getData(x));
    for(let i=0;i<ids.length;i++){
        const data = await promises;
        console.log(data);//这样写算是并行
    }
};
use();