JavaScript async/await

提示

1. 异步函数定义：使用async关键字定义的函数是异步函数，它返回一个Promise对象。
2. await关键字使用：在async函数内部，await关键字用于等待异步操作完成，直到Promise解决（resolve）或拒绝（reject）。
3. 错误处理和优势：async函数中错误处理可以通过try/catch块或catch()方法实现，这种方法比使用回调或Promise更具可读性，调试也更简单。

我们使用 async 关键字与函数一起表示该函数是一个异步函数。异步函数返回一个 promise。

async 函数的语法是：

async function name(parameter1, parameter2, ...paramaterN) {
  // 语句
}

这里，

• name - 函数的名称
• parameters - 传递给函数的参数

示例：异步函数

// 异步函数示例

async function f() {
  console.log("异步函数。");
  return Promise.resolve(1);
}

f();

输出

异步函数。

在上述程序中，函数前使用 async 关键字表示该函数是异步的。

由于此函数返回 promise，你可以像这样使用链式方法 then()：

async function f() {
  console.log("异步函数。");
  return Promise.resolve(1);
}

f().then(function (result) {
  console.log(result);
});

输出

异步函数;
1;

在上述程序中，f() 函数被解决，then() 方法得到执行。

JavaScript await 关键字

await 关键字用于 async 函数内等待异步操作。

使用 await 的语法是：

let result = await promise;

使用 await 会暂停 async 函数，直到 promise 返回结果（解决或拒绝）。例如，

// 一个 promise
let promise = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve("Promise 已解决");
  }, 4000);
});

// 异步函数
async function asyncFunc() {
  // 等待 promise 解决
  let result = await promise;

  console.log(result);
  console.log("hello");
}

// 调用异步函数
asyncFunc();

输出

Promise 已解决
hello

在上述程序中，创建了一个 Promise 对象，它在 4000 毫秒后被解决。这里，使用 async 函数编写了 asyncFunc() 函数。

await 关键字等待 promise 完成（解决或拒绝）。

let result = await promise;

因此，只有在 promise 的值对变量 result 可用后，才显示 hello。

在上述程序中，如果不使用 await，hello 将在 Promise resolved 之前显示。

注意：你只能在异步函数内使用 await。

异步函数允许以看似同步的方式执行异步方法。尽管操作是异步的，但看起来操作是以同步方式执行的。

如果程序中有多个 promise，这会非常有用。例如，

let promise1;
let promise2;
let promise3;

async function asyncFunc() {
  let result1 = await promise1;
  let result2 = await promise2;
  let result3 = await promise3;

  console.log(result1);
  console.log(result1);
  console.log(result1);
}

在上述程序中，await 等待每个 promise 完成。

错误处理

在使用 async 函数时，你以同步方式编写代码。你也可以使用 catch() 方法来捕获错误。例如，

asyncFunc()
  .catch
  // 捕获错误并做些事情
  ();

另一种处理错误的方式是使用 try/catch 块。例如，

// 一个 promise
let promise = new Promise(function (resolve, reject) {
  setTimeout(function () {
    resolve("Promise 已解决");
  }, 4000);
});

// 异步函数
async function asyncFunc() {
  try {
    // 等待 promise 解决
    let result = await promise;

    console.log(result);
  } catch (error) {
    console.log(error);
  }
}

// 调用异步函数
asyncFunc(); // Promise 已解决

在上面的程序中，我们使用了try/catch块来处理错误。如果程序成功运行，它将进入try块。如果程序抛出错误，它将进入catch块。

要了解更多关于try/catch的详细信息，请访问 JavaScript JavaScript try/catch。

使用异步函数的好处

• 代码比使用回调或Promise更易读。
• 错误处理更简单。
• 调试更容易。

注意：这两个关键字async/await是在 JavaScript 的新版本（ES8）中引入的。一些较旧的浏览器可能不支持使用 async/await。要了解更多，请访问 JavaScript async/await 浏览器支持。