ES7 中的 async/await 用法指南

在现代前端开发中，异步操作已经成为了必不可少的一部分。ES7 中引入了 async/await，它们是一种更加简单、易于理解的异步编程方式。本文将详细介绍 async/await 的用法，并通过示例代码演示其深度和学习以及指导意义。

async/await 是什么？

async/await 是 ES7 中新增的一种异步编程方式。async/await 是基于 Promise 的，它提供了一种更加简单、易于理解的编程方式。async/await 让我们可以使用同步的方式编写异步代码，避免了回调地狱的问题。

async/await 的使用

async

async 函数是异步函数的一种声明方式。async 函数返回一个 Promise 对象，当函数内部有异步操作时，该 Promise 对象将会 resolve。async 函数可以使用 await 来等待一个 Promise 对象的结果。

async function getData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data');
    }, 1000);
  });
}

getData().then(data => console.log(data));

在上面的代码中，我们定义了一个 async 函数 getData，它返回一个 Promise 对象。在该函数中，我们使用了 setTimeout 模拟了一个异步操作。当该异步操作完成后，Promise 对象将会 resolve，并返回字符串 'Data'。

await

await 关键字用于等待一个 Promise 对象的结果。使用 await 时，必须将其放在 async 函数内部。

async function getData() {
  const data = await new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data');
    }, 1000);
  });

  console.log(data);
}

getData();

在上面的代码中，我们将 await 放在了 Promise 对象前面，等待该 Promise 对象 resolve 后，将结果赋值给了变量 data。

async/await 与 Promise

async/await 是基于 Promise 的，它们是 Promise 的语法糖。async 函数返回的是一个 Promise 对象，await 关键字等待的也是一个 Promise 对象。因此，async/await 可以与 Promise 配合使用。

async function getData() {
  const data = await fetch('/api/data');
  return data.json();
}

getData().then(data => console.log(data));

在上面的代码中，我们定义了一个 async 函数 getData，它使用了 await 关键字等待了一个 fetch 请求的结果。fetch 返回的是一个 Promise 对象，我们使用了 await 等待该 Promise 对象 resolve 后，再使用 json 方法将结果解析成 JSON 格式。

async/await 的优点

更加易于理解的代码

使用 async/await 可以让异步代码的逻辑更加清晰，代码的可读性更高。

// 使用 Promise
function getData() {
  return fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
}

// 使用 async/await
async function getData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

在上面的代码中，我们比较了使用 Promise 和使用 async/await 的代码。可以看到，使用 async/await 可以让异步代码的逻辑更加清晰，代码的可读性更高。

避免回调地狱

使用 async/await 可以避免回调地狱的问题，代码的可维护性更高。

// 使用 Promise
function getData() {
  return fetch('/api/data')
    .then(response => response.json())
    .then(data => {
      return fetch(`/api/data/${data.id}`)
        .then(response => response.json())
        .then(detail => console.log(detail))
        .catch(error => console.error(error));
    })
    .catch(error => console.error(error));
}

// 使用 async/await
async function getData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    const detailResponse = await fetch(`/api/data/${data.id}`);
    const detail = await detailResponse.json();
    console.log(detail);
  } catch (error) {
    console.error(error);
  }
}

在上面的代码中，我们比较了使用 Promise 和使用 async/await 的代码。可以看到，使用 async/await 可以避免回调地狱的问题，代码的可维护性更高。

总结

async/await 是 ES7 中新增的一种异步编程方式，它是基于 Promise 的语法糖。使用 async/await 可以让异步代码的逻辑更加清晰，代码的可读性更高，避免了回调地狱的问题，代码的可维护性更高。在实际开发中，我们应该尽可能地使用 async/await 来编写异步代码。

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