async函数（异步函数）

发表于 2021-01-12 更新于 2023-08-04 分类于 javascript 阅读次数：

概述

async 函数是在 ES2017 引入的。

概念：真正意义上去解决异步回调的问题，同步流程表达异步操作。

本质： Generator 的语法糖。

async 比之前的 Promise、Generator 要好用一些。

语法：

async function foo() {
  // await 异步操作
  // await 异步操作
}

我们在普通的函数前面加上 async 关键字，就成了 async 函数。

async、Promise、Generator 的对比（async 的特点）

promise 具体请参考：Promise 对象

不需要像 Generator 去调用 next 方法，遇到 await 等待，当前的异步操作完成就往下执行。
async 返回的总是 Promise 对象，可以用 then 方法进行下一步操作。
async 取代 Generator 函数的星号*，await 取代 Generator 的 yield。
语意上更为明确，使用简单，经临床验证，暂时没有任何副作用。

为什么 Async/Await 更好？

使用 async 函数可以让代码简洁很多，不需要像 Promise 一样需要些 then，不需要写匿名函数处理 Promise 的 resolve 值，也不需要定义多余的 data 变量，还避免了嵌套代码。

错误处理：
Async/Await 让 try/catch 可以同时处理同步和异步错误。

在下面的 promise 示例中，try/catch 不能处理 JSON.parse 的错误，因为它在 Promise 中。我们需要使用 .catch，这样错误处理代码非常冗余。并且，在我们的实际生产代码会更加复杂。

const makeRequest = () => {
  try {
    getJSON().then(result => {
      // JSON.parse可能会出错
      const data = JSON.parse(result);
      console.log(data);
    });
    // 取消注释，处理异步代码的错误
    // .catch((err) => {
    //   console.log(err)
    // })
  } catch (err) {
    console.log(err);
  }
};

使用 aync/await 的话，catch 能处理 JSON.parse 错误

const makeRequest = async () => {
  try {
    // this parse may fail
    const data = JSON.parse(await getJSON());
    console.log(data);
  } catch (err) {
    console.log(err);
  }
};

条件语句
条件语句也和错误捕获是一样的，在 Async 中也可以像平时一般使用条件语句

Promise：

const makeRequest = () => {
  return getJSON().then(data => {
    if (data.needsAnotherRequest) {
      return makeAnotherRequest(data).then(moreData => {
        console.log(moreData);
        return moreData;
      });
    } else {
      console.log(data);
      return data;
    }
  });
};

Async/Await：

const makeRequest = async () => {
  const data = await getJSON();
  if (data.needsAnotherRequest) {
    const moreData = await makeAnotherRequest(data);
    console.log(moreData);
    return moreData;
  } else {
    console.log(data);
    return data;
  }
};

中间值
场景：调用 promise1，使用 promise1 返回的结果去调用 promise2，然后使用两者的结果去调用 promise3

const makeRequest = () => {
  return promise1().then(value1 => {
    return promise2(value1).then(value2 => {
      return promise3(value1, value2);
    });
  });
};

如果 promise3 不需要 value1，嵌套将会变得简单。如果你忍受不了嵌套，你可以将 value 1 & 2 放进 Promise.all 来避免深层嵌套，但是这种方法为了可读性牺牲了语义。除了避免嵌套，并没有其他理由将 value1 和 value2 放在一个数组中

const makeRequest = () => {
  return promise1()
    .then(value1 => {
      return Promise.all([value1, promise2(value1)]);
    })
    .then(([value1, value2]) => {
      return promise3(value1, value2);
    });
};

使用 async/await 的话，代码会变得异常简单和直观

const makeRequest = async () => {
  const value1 = await promise1();
  const value2 = await promise2(value1);
  return promise3(value1, value2);
};

错误栈

如果 Promise 连续调用，对于错误的处理是很麻烦的。你无法知道错误出在哪里

const makeRequest = () => {
  return callAPromise()
    .then(() => callAPromise())
    .then(() => callAPromise())
    .then(() => callAPromise())
    .then(() => callAPromise())
    .then(() => {
      throw new Error("oops");
    });
};

makeRequest().catch(err => {
  console.log(err);
  // output
  // Error: oops at callAPromise.then.then.then.then.then (index.js:8:13)
});

async/await 中的错误栈会指向错误所在的函数。在开发环境中，这一点优势并不大。但是，当你分析生产环境的错误日志时，它将非常有用。这时，知道错误发生在 makeRequest 比知道错误发生在 then 链中要好

const makeRequest = async () => {
  await callAPromise();
  await callAPromise();
  await callAPromise();
  await callAPromise();
  await callAPromise();
  throw new Error("oops");
};

makeRequest().catch(err => {
  console.log(err);
  // output
  // Error: oops at makeRequest (index.js:7:9)
});

调试
使用 await/async 时，不再需要那么多箭头函数，这样你就可以像调试同步代码一样跳过 await 语句。
async/await 能够使得代码调试更简单。2 个理由使得调试 Promise 变得非常痛苦:
1. 不能在返回表达式的箭头函数中设置断点
2. 如果你在.then 代码块中设置断点，使用 Step Over 快捷键，调试器不会跳到下一个.then，因为它只会跳过异步代码。