JavaScript中async/await的使用与原理详解

JavaScript中的await

先来介绍一下async 函数

async 函数通过 async 关键字声明，它是 AsyncFunction 构造函数的实例，内部允许使用 await 关键字。async 和 await 提供了一种更简洁的方式来处理基于 Promise 的异步逻辑，避免了繁琐的 promise 链式调用。

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}
async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  console.log(result);
  // Expected output: "resolved"
}
asyncCall();

async 函数可以包含零个或多个 await 表达式。await 会暂停 async 函数的执行并释放控制权，直到其等待的基于 promise 的异步操作完成（兑现或拒绝）后，函数进程才会恢复。promise 的解决值将作为该 await 表达式的返回值。使用 async/await 允许在异步代码中使用常规的 try/catch 代码块。

注意：await 关键字仅在 async 函数内 中有效。若在 async 函数体之外使用，将引发语法错误 SyntaxError 。 备注：async/await 旨在简化基于 promise 的 API 的语法。其行为类似于生成器与 promise 的组合。

await概念

await 操作符用于等待一个 Promise 兑现并获取其兑现后的值。它只能在 异步函数 或者 模块顶层 中使用。

await expression;

expression 表示要等待的 Promise 实例、Thenable 对象或任意类型的值。

返回值：返回从 Promise 实例或 thenable 对象取得的处理结果。如果等待的值不符合 thenable，则返回 表达式本身的值。

异常：拒绝（reject）的原因会被作为异常抛出。

await 通常用于解开 promise 的包装，方法是传递一个 Promise 作为 expression。使用 await 总会暂停当前异步函数的执行，在该 Promise 敲定（settled，指兑现或拒绝）后继续执行。函数的执行恢复（resume）时，await 表达式的值已经变成了 Promise 兑现的值。

若该 Promise 被拒绝（rejected），await 表达式会把拒绝的原因（reason）抛出。当前函数（await 所在的函数）会出现在抛出的错误的栈追踪（stack trace），否则当前函数就不会在栈追踪出现。

await 总会同步地对表达式求值并处理，处理的行为与 Promise.resolve() 一致，不属于原生 Promise 的值全都会被隐式地转换为 Promise 实例后等待。处理的规则为，若表达式：

• 是一个原生 Promise（原生Promise 的实例或其派生类的实例，且满足 expression.constructor ===
• Promise），会被直接用于等待，等待由原生代码实现，该对象的 then() 不会被调用。
• 是 thenable 对象（包括非原生的 Promise 实例、polyfill、Proxy、派生类等），会构造一个新 Promise用于等待，构造时会调用该对象的 then() 方法。
• 不是 thenable 对象，会被包装进一个已兑现的 Promise 用于等待，其结果就是表达式的值。

等待 Promise 的兑现

当一个 Promise 被传递给 await 操作符，await 将等待该 Promise 兑现，并在兑现后返回该 Promise 兑现的值。

function resolveAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}
async function f1() {
  let x = await resolveAfter2Seconds(10);
  console.log(x); // 10
}
f1();

转换为 promise

若表达式的值不是 Promise，await 会把该值转换为已兑现的 Promise，然后返回其结果。

async function f3() {
  const y = await 20;
  console.log(y); // 20
  const obj = {};
  console.log((await obj) === obj); // true
}
f3();

promise 被拒绝

如果 Promise 被拒绝，则抛出拒绝的原因。

async function f4() {
  try {
    const z = await Promise.reject(30);
  } catch (e) {
    console.error(e); // 30
  }
}
f4();

处理被拒绝的 promise

你可以链式调用 catch()（而不是使用 try）以在等待 promise 兑现之前处理被拒绝的 promise。

const response = await promisedFunction().catch((err) => {
  console.error(err);
  return "default response";
});
// response will be "default response" if the promise is rejected

到此这篇关于JavaScript中的await的文章就介绍到这了,更多相关JavaScript await内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！