深入学习async和await

·  阅读 1197
深入学习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);
复制代码

企业微信截图_16475845536832.png

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

(3) await针对所跟不同表达式的处理方式:

  • Promise 对象:await 会暂停执行,等待 Promise 对象 resolve,然后恢复 async 函数的执行并返回解析值。
  • 非 Promise 对象:直接返回对应的值。
async function asyncDemo() {
    return 1;
}
let asyncDemoRes = await asyncDemo();
console.log(asyncDemoRes, asyncDemoRes);
复制代码

image.png

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的基本用法以及如何深入理解,还介绍了如何进行错误处理和并行。

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改