带你快速掌握 ES7 的 async/await

什么是 async/await

async/await 是 ES7 中新增的异步编程语法，用于处理异步操作中的回调地狱问题。它基于 Promise，使得异步代码的编写更加简单和直观。

async 函数是一个返回 Promise 的函数，可以使用 await 关键字来等待 Promise 对象的状态变化。在 async 函数中使用 await 关键字，可以将异步操作的执行顺序转换为同步的写法。

如何使用 async/await

定义 async 函数

定义一个 async 函数，只需要在函数前面加上 async 关键字即可。

async function fetchData() {
  // 异步操作
}

使用 await 等待 Promise 对象

在 async 函数中，使用 await 关键字等待一个 Promise 对象的状态变化。当 Promise 对象的状态变为 resolved 时，await 关键字会返回 Promise 对象的结果。

async function fetchData() {
  const result = await fetch('https://api.example.com/data');
  console.log(result);
}

在上面的代码中，fetch 函数返回一个 Promise 对象，await 关键字等待 Promise 对象的状态变为 resolved，并返回 Promise 对象的结果。在控制台打印出结果。

处理错误

使用 try/catch 语句来处理异步操作中的错误。

async function fetchData() {
  try {
    const result = await fetch('https://api.example.com/data');
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

在上面的代码中，如果 fetch 函数返回的 Promise 对象的状态变为 rejected，await 关键字会抛出一个错误，可以通过 try/catch 语句来捕获错误并进行处理。

示例代码

下面是一个使用 async/await 处理异步操作的示例代码。

// javascriptcn.com 代码示例
async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('网络请求失败');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

在上面的代码中，首先使用 fetch 函数发送一个网络请求，然后使用 await 关键字等待 Promise 对象的状态变为 resolved。如果网络请求失败，会抛出一个错误。如果网络请求成功，会将返回的数据解析为 JSON 对象，并打印出来。

总结

async/await 是一种更加直观和简单的异步编程语法，可以帮助我们处理异步操作中的回调地狱问题。在编写异步代码时，推荐使用 async/await 来提高代码的可读性和可维护性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/656e6bc9d2f5e1655d690996