从零开始构建自己的 axios：探索额外的特性

前言

在过去的章节中，我们对 axios 的核心功能进行了深入探索，并编写了大量代码来实现我们自己的简易版 axios。现在，我们已经打下了坚实的基础，可以更深入地挖掘 axios 的强大之处。在这个章节中，我们将探究它所提供的额外功能，这些特性让 API 交互变得更加简单和高效。

正文

1. 发送自定义请求头

在与 API 交互时，有时我们需要发送自定义请求头，来提供诸如身份验证、语言偏好或内容类型等附加信息。axios 允许我们通过多种方式发送自定义请求头。

• 在单个请求中添加自定义请求头：

axios({
  url: 'http://example.com/api/v1/users',
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer 123456'
  }
});

• 在多个请求中添加自定义请求头：

如果你需要在多个请求中发送相同的自定义请求头，你可以使用以下方式：

axios.defaults.headers.common = {
  'Content-Type': 'application/json',
  'Authorization': 'Bearer 123456'
};

现在，在使用 axios 时，这些请求头将会自动发送。

2. 处理响应状态码

axios 为我们提供了处理 HTTP 响应状态码的便捷方式。我们可以使用 then() 方法来处理成功的响应，使用 catch() 方法来处理失败的响应。

axios.get('http://example.com/api/v1/users')
  .then(function (response) {
    // 处理成功的响应
  })
  .catch(function (error) {
    // 处理失败的响应
  });

3. 使用拦截器

拦截器是 axios 的一个强大功能，它允许你在请求发送前和响应返回后执行自定义代码。你可以使用拦截器来处理请求头、响应数据、错误处理等各种操作。

• 请求拦截器：

axios.interceptors.request.use(function (config) {
  // 在请求发送前执行
  return config;
});

• 响应拦截器：

axios.interceptors.response.use(function (response) {
  // 在响应返回后执行
  return response;
});

4. 支持 Promise 和 async/await

axios 支持 Promise 和 async/await，这使得代码更加简洁和易于阅读。

async function getUsers() {
  const response = await axios.get('http://example.com/api/v1/users');
  return response.data;
}

总结

在本章中，我们探讨了 axios 的一些额外功能，这些特性使 API 交互更加便捷和高效。通过使用自定义请求头、处理响应状态码、使用拦截器以及支持 Promise 和 async/await，我们可以编写出更加健壮和可维护的代码。

在接下来的章节中，我们将继续深入探索 axios 的更多特性，并使用它来构建更加复杂的应用程序。