JavaScript中的await

这篇具有很好参考价值的文章主要介绍了JavaScript中的await。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

JavaScript中的await

先来介绍一下async 函数

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();

javascript await,javascript,前端,开发语言
async 函数可能包含 0 个或者多个 await 表达式。await 表达式会暂停整个 async 函数的执行进程并出让其控制权，只有当其等待的基于 promise 的异步操作被兑现或被拒绝之后才会恢复进程。promise 的解决值会被当作该 await 表达式的返回值。使用 async/await 关键字就可以在异步代码中使用普通的 try/catch 代码块。

注意： await关键字只在 async 函数内有效。如果你在 async 函数体之外使用它，就会抛出语法错误 SyntaxError 。
备注： async/await的目的为了简化使用基于 promise 的 API 时所需的语法。async/await 的行为就好像搭配使用了生成器和 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。文章来源地址https://www.toymoban.com/news/detail-723172.html

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