Axios 源码解析（零）：文档翻译

前端

2023-11-05 21:29:35

前言

Axios 是一个基于 Promise 的 HTTP 客户端库，可以在浏览器和 Node.js 中使用。它有着一个简洁的 API，并支持多种特性，如请求和响应拦截器、取消请求、自动 JSON 转换等。

本文将对 Axios 的源码进行详细解析，帮助读者深入了解 Axios 的工作原理并掌握其使用方法。

Axios 简介

Axios 的主要特点包括：

基于 Promise，易于使用
支持多种特性，如请求和响应拦截器、取消请求、自动 JSON 转换等
跨浏览器兼容，可在所有现代浏览器中使用
支持 Node.js，可在服务器端使用
文档齐全，易于学习

Axios 的安装

Axios 可以通过以下方式安装：

在浏览器中使用 CDN：

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

在 Node.js 中使用 npm：

npm install axios

Axios 的使用方法

Axios 的使用方法非常简单，只需要几行代码就可以发送一个 HTTP 请求。

axios.get('https://example.com')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error.message);
  });

上面的代码发送了一个 GET 请求到 https://example.com，然后将响应数据输出到控制台。如果请求失败，则会输出错误信息。

Axios 的高级用法

Axios 还支持一些高级用法，如请求和响应拦截器、取消请求、自动 JSON 转换等。

请求和响应拦截器

请求和响应拦截器允许我们在发送请求和接收响应之前或之后做一些事情。例如，我们可以使用请求拦截器来添加一个请求头，或者使用响应拦截器来处理响应数据。

axios.interceptors.request.use(config => {
  config.headers['X-Requested-With'] = 'XMLHttpRequest';
  return config;
});

axios.interceptors.response.use(response => {
  response.data = JSON.parse(response.data);
  return response;
});

上面的代码使用请求拦截器添加了一个 X-Requested-With 请求头，并使用响应拦截器将响应数据解析为 JSON 对象。

取消请求

Axios 还支持取消请求。我们可以使用 CancelToken 来创建一个取消令牌，然后将该令牌传递给 axios。如果我们想要取消请求，只需调用 cancelToken.cancel() 方法即可。

const cancelToken = axios.CancelToken.source();

axios.get('https://example.com', {
  cancelToken: cancelToken.token
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    if (axios.isCancel(error)) {
      console.log('Request cancelled');
    } else {
      console.log(error.message);
    }
  });

cancelToken.cancel();

上面的代码发送了一个 GET 请求到 https://example.com，并使用了 CancelToken 来取消请求。如果我们想要取消请求，只需调用 cancelToken.cancel() 方法即可。

自动 JSON 转换

Axios 还支持自动 JSON 转换。我们可以通过设置 axios.defaults.headers.common['Accept'] = 'application/json' 来告诉 Axios 自动将响应数据解析为 JSON 对象。

axios.defaults.headers.common['Accept'] = 'application/json';

axios.get('https://example.com')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error.message);
  });

上面的代码发送了一个 GET 请求到 https://example.com，并使用了 axios.defaults.headers.common['Accept'] = 'application/json' 来告诉 Axios 自动将响应数据解析为 JSON 对象。