理解 JavaScript 中的 Async/Await

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 promises 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 promises error
  const err = await promise.catch(err => err);
  err.message; // Oops
}
© 版权声明
THE END
喜欢就支持一下吧
点赞297 分享
评论 抢沙发

请登录后发表评论

    请登录后查看评论内容