深入学习async和await

1、干嘛用的

• 生成异步，等待异步完成，实现异步代码的扁平化~

• async 函数返回的是一个 Promise 对象,如果在函数中 return 一个直接量，async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。

    async function asyncDemo1() {
        return 'generate a new Promise';
    }

    asyncDemo1().then(res => {
        console.log(res);
    });

以上实际上相当于：

    function promiseDemo1() {
        return new Promise((resolve, reject) => {
            resolve('generate a new Promise');
        });
        // 或者
        // return Promise.resolve('generate a new Promise');
    }
    promiseDemo1().then(res => {
        console.log(res);
    })

2、基本用法

    async function asyncDemo1() {
        return 'generate a new Promise';
    }
    // 将会返回generate a new Promise, 实际和使用promise then类似~
    await asyncDemo1();

3、如何理解

（1） async是异步的意思，await是等待的意思，async是声明一个异步函数，await是等待异步函数执行完毕；

await必须写在在async函数中；
async函数的执行可以在任何函数中；

（2） async 函数中可能会有 await 表达式，async 函数执行时，如果遇到 await 就会先暂停执行 ，等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值。

--- 如下代码会打印出啥
async function genAsy() {
    console.log(1);
    return new Promise((resolve, reject) => {
        console.log(2);
        //resolve(3);
    }).then(res => {
        console.log(3);
    });
}
await genAsy();
console.log(4);
--- 如下代码会打印出啥
async function genAsy() {
    console.log(1);
    return new Promise((resolve, reject) => {
        console.log(2);
        //resolve(3);
    }).then(res => {
        console.log(3);
    });
}
genAsy();
console.log(4);

表明await确实会等待异步函数执行完毕才会执行下一步~

（3） await针对所跟不同表达式的处理方式：

• Promise 对象：await 会暂停执行，等待 Promise 对象 resolve，然后恢复 async 函数的执行并返回解析值。
• 非 Promise 对象：直接返回对应的值。

async function asyncDemo() {
    return 1;
}
let asyncDemoRes = await asyncDemo();
console.log(asyncDemoRes, asyncDemoRes);

4、如何处理异常

• 使用try...catch

async function genAsy() {
    return new Promise((resolve, reject) => {
        resolve(3);
    }).then(res => {
        tetst
        console.log(3);
    });
}
try {
    await genAsy();
} catch(err) {
    console.log(err)
}

• 封装库 参考

  /**
   * 包装promise, 使其返回统一的错误格式
   * @param {Promise} promise 
   */
  function to (promise) {
    return promise.then(res => [null, res]).catch(err => [err])
  }
  const [err, res] = await to(genAsy())
  if (err) {
    console.error('touser err:', err)
  }

5、如何并行处理

async function fetchParallel () {
  return {
    name: await genAsy(),
    avatar: await genAsy() 
  }
}

• Promise.all

Promise.all([
    genAsy(),
    genAsy()
]);

6、结束

以上就是对async/await的基本用法以及如何深入理解，还介绍了如何进行错误处理和并行。