JavaScript 开发中如何使用 ECMAScript 2017 提供的 async/await 方法管理异步代码-JavaScript中文网-JavaScript教程资源分享门户

随着前端应用越来越复杂，异步代码也越来越普遍。传统的回调函数和 Promise 对象虽然能够处理异步代码，但是它们让异步代码变得冗长而难以维护。ECMAScript 2017 引入了 async/await 方法，它们可以让异步代码更加清晰、易于编写和维护。本文将介绍 async/await 方法的用法，并提供示例代码。

异步代码的问题

在了解 async/await 之前，让我们先看看异步代码存在哪些问题。假设我们有一个函数 fetchData，它会从远程 API 获取数据并执行回调函数。这里是一个使用回调函数的例子：

// javascriptcn.com 代码示例
function fetchData(callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/data');
  xhr.onload = () => {
    if (xhr.status === 200) {
      callback(null, JSON.parse(xhr.responseText));
    } else {
      callback(new Error('Request failed'));
    }
  };
  xhr.onerror = () => {
    callback(new Error('Request failed'));
  };
  xhr.send();
}

fetchData((err, data) => {
  if (err) {
    console.error(err);
  } else {
    console.log(data);
  }
});

这里有一些明显的问题：

回调函数导致代码变得冗长并难以阅读。
当有多个异步操作发生时，回调函数会形成回调地狱，使代码难以维护。
无法使用常见的控制流语句（如 if 和 try-catch）来处理异步操作结果。

因此，我们需要一种更好的方法来管理异步代码。

使用 Promise

Promise 对象是一种更好的处理异步代码的方式。在使用 Promise 之前，我们需要对 fetch 函数进行一些修改，以便它返回一个 Promise 对象：

// javascriptcn.com 代码示例

function fetchData() {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/api/data');
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject(new Error('Request failed'));
      }
    };
    xhr.onerror = () => {
      reject(new Error('Request failed'));
    };
    xhr.send();
  });
}

然后我们可以使用 Promise 的 then 方法来处理异步操作结果：

fetchData()
  .then(data => console.log(data))
  .catch(err => console.error(err));

这是一个改进，但是我们仍然需要将回调函数传递给 then 方法，并且仍然无法使用常规控制流语句来处理异步代码。

使用 async/await

async/await 是一种更好的方式，它允许我们使用常规控制流语句来处理异步操作结果。通过将 Promise 对象与 async/await 方法结合使用，我们可以编写异步代码，这些代码的结构类似于同步代码。

这里我们将再次修改 fetchData 函数，以便它返回 Promise 对象：

// javascriptcn.com 代码示例
function fetchData() {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/api/data');
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject(new Error('Request failed'));
      }
    };
    xhr.onerror = () => {
      reject(new Error('Request failed'));
    };
    xhr.send();
  });
}

现在我们可以在外层函数中使用 async 关键字来标记该函数为异步函数。我们可以在异步函数中使用 await 关键字来等待 Promise 对象的结果：

async function getData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

这里有一些需要注意的地方：

我们可以使用 async 关键字来将函数声明为异步函数。
使用 await 关键字等待 Promise 结果。
我们可以使用 try-catch 块来处理 Promise 的 reject 结果。

示例代码

下面是一个完整的例子，它演示了如何使用 async/await 方法管理异步代码：

// javascriptcn.com 代码示例
function fetchData() {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/api/data');
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject(new Error('Request failed'));
      }
    };
    xhr.onerror = () => {
      reject(new Error('Request failed'));
    };
    xhr.send();
  });
}

async function getData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

getData();

在上面的例子中，我们将 fetchData 函数改为返回 Promise 对象，然后将 getData 函数标记为异步函数，并在其中等待 fetchData 的结果。如果 Promise 被成功解决，则将数据记录到控制台中，否则将显示错误。

总结

async/await 方法能够显著提高异步代码的可读性和可维护性。通过将 Promise 对象与 async/await 方法结合使用，我们可以编写易于阅读和维护的异步代码。如果你正在开发前端应用，并且想让异步代码更加清晰、易于管理，请尝试使用 ECMAScript 2017 提供的 async/await 方法。

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