理解 JavaScript 中的 Async/Await

Question

Async/await 允许您以一种看起来像同步代码的方式编写异步代码。 您可以使用 if 语句、for 循环和 try/catch 在异步函数中。

异步

async 关键字将函数标记为 异步函数 。在下面的示例中， test() 是一个异步函数。

async function test() {
  return 42;
}

您还可以定义异步箭头函数：

const test = async () => 42;

等待

异步函数的特殊之处在于您可以使用 await 关键词。 如果你 await 根据承诺， await 关键字 暂停 执行周围的异步函数，直到 promise 完成或拒绝 。 await 还可以获取  Promise：它为您提供 Promise 的 resolve 回调。

async function test() {
  // `await` unwraps the promise's value
  const val = await Promise.resolve(42);
  val; // 42
}

test();

在上面的例子中， Promise.resolve() 意味着承诺立即履行。 在下面的示例中， await 暂停执行 test() 100 毫秒：

async function test() {
  const start = Date.now();
  await new Promise(resolve => setTimeout(resolve, 100));
  const elapsed = Date.now() - start;
  elapsed; // about 100
}

await 只是一个普通的旧 JavaScript 关键字。 这意味着您可以在内部使用它 if 判断、for 循环和 try/catch。

async function asyncEvenNumbers() {
  const nums = [];
  for (let i = 1; i <= 10; ++i) {
    if (i % 2 === 0) {
      const v = await Promise.resolve(i);
      nums.push(v);
    }
  }

  nums; // [2, 4, 6, 8, 10]
}

返回值

异步函数的另一个特殊属性是它们总是返回一个 Promise，即使您从异步函数返回原始值，JavaScript 也会将该值包装在 Promise 中。

async function test() {
  return 42;
}

const p = test();
p instanceof Promise; // true
p.then(v => {
  v; // 42
});

这意味着可以使用 await 在异步函数调用上：

async function test() {
  return 42;
}

async function main() {
  const val = await test();
  val; // 42
}

错误处理

使用 async/await 处理错误 是一个复杂的话题。 但是在高层次上，有两种处理错误的模式，当你 await 在一个 Promise 上，而那个 Promise 拒绝了， await 抛出一个错误，你可以 try/catch 捕捉：

async function test() {
  try {
    await Promise.reject(new Error('Oops'));
  } catch (err) {
    err.message; // Oops
  }
}

您还可以 使用 Promise#catch()： 获取 promise 错误的函数

async function test() {
  const promise = Promise.reject(new Error('Oops'));

  // Unwrap the promise's error
  const err = await promise.catch(err => err);
  err.message; // 'Oops'
}