ES6 中使用 async/await 处理网络请求-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常需要通过网络请求获取数据。在 ES6 中，通过使用 async/await 关键字，可以更加方便地处理异步请求，避免回调地狱的问题。

async/await 简介

在 ES6 中，async 和 await 是两个关键字，用于处理异步请求。其中，async 用于修饰一个函数，表示该函数是一个异步函数；await 用于等待一个异步操作的结果，并将其赋值给一个变量。

使用 async/await 的好处是，可以将异步请求的代码写成同步代码的形式，避免回调地狱的问题，提高代码的可读性和可维护性。

示例代码

下面是一个使用 async/await 处理网络请求的示例代码：

// www.javascriptcn.com code example
async function getData() {
  try {
    const response = await fetch('https://api.github.com/users/github');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

getData();

在这个示例中，我们定义了一个名为 getData 的异步函数，用于获取 GitHub 用户 github 的信息。在函数中，我们首先使用 fetch 函数发起网络请求，然后使用 await 关键字等待请求的结果，并将其转换为 JSON 格式的数据。最后，我们将获取到的数据打印到控制台中。

值得注意的是，在异步函数中，我们可以使用 try/catch 语句来捕获可能出现的异常，以避免程序崩溃。

深入学习

除了上面的示例代码，我们还可以深入学习 async/await 的更多用法和注意事项。

1. 处理多个异步请求

在实际开发中，我们经常需要同时处理多个异步请求，这时可以使用 Promise.all 方法来等待所有请求的结果。例如：

// www.javascriptcn.com code example
async function getData() {
  try {
    const [userResponse, repoResponse] = await Promise.all([
      fetch('https://api.github.com/users/github'),
      fetch('https://api.github.com/users/github/repos')
    ]);
    const userData = await userResponse.json();
    const repoData = await repoResponse.json();
    console.log(userData, repoData);
  } catch (error) {
    console.error(error);
  }
}

getData();

在这个示例中，我们使用 Promise.all 方法等待两个异步请求的结果，然后将获取到的用户信息和仓库信息打印到控制台中。

2. 错误处理

在异步函数中，我们可以使用 try/catch 语句来捕获可能出现的异常。但是，在处理异步请求时，可能会出现一些特殊的错误，例如网络错误或超时错误。这时，我们可以使用 catch 方法来捕获这些错误。例如：

// www.javascriptcn.com code example
async function getData() {
  const response = await fetch('https://api.github.com/users/github');
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  const data = await response.json();
  console.log(data);
}

getData().catch(error => {
  console.error(error);
});

在这个示例中，我们使用 throw 关键字抛出一个错误，当网络请求返回的状态码不是 200 时，就会抛出该错误。然后，在调用异步函数时，我们可以使用 catch 方法来捕获该错误。

3. 取消异步请求

在实际开发中，我们可能需要取消某个异步请求，以避免浪费网络带宽和服务器资源。在 ES6 中，可以使用 AbortController 来取消异步请求。例如：

// www.javascriptcn.com code example
const controller = new AbortController();
const signal = controller.signal;

async function getData() {
  try {
    const response = await fetch('https://api.github.com/users/github', { signal });
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

setTimeout(() => {
  controller.abort();
}, 5000);

getData();

在这个示例中，我们首先创建了一个 AbortController 对象和一个 signal 对象，用于取消异步请求。然后，在异步函数中，我们将 signal 对象作为 fetch 方法的第二个参数传入，以便在取消请求时使用。最后，我们使用 setTimeout 方法来模拟 5 秒后取消异步请求的情况。

指导意义

使用 async/await 处理网络请求，可以更加方便地处理异步请求，避免回调地狱的问题，提高代码的可读性和可维护性。同时，我们还可以深入学习 async/await 的更多用法和注意事项，以提高开发效率和代码质量。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d128bca941bf713427560a

ES6 中使用 async/await 处理网络请求