Axios 详解

Axios 是一个基于 promise 的 HTTP 客户端，用于浏览器和 node.js 环境。它主要用于发送异步 HTTP 请求到 REST 端点，并处理响应。以下是 Axios 的一些核心功能和常见用法的详解：

Axios 的音标是 [ˈæksiˌɑs]。在这个音标中，第一个音节 “ax” 发音类似于英语单词 “axe” 中的 “ax”，重音在第一个音节，第二个音节的 “ios” 发音类似于 “ocean” 中的 “os”。

1. 安装 Axios

在 Node.js 中，您可以通过 npm 或 yarn 来安装 Axios：

npm install axios

或者

yarn add axios

在浏览器中，可以直接通过 <script> 标签引入：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

2. 基本用法

使用 Axios 发起 GET 和 POST 请求的基本示例：

GET 请求：

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

POST 请求：

axios.post('https://api.example.com/data', {
    firstName: 'Foo',
    lastName: 'Bar'
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

3. 请求配置

Axios 允许您详细配置请求：

axios({
  method: 'post',
  url: 'https://api.example.com/user',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  },
  headers: {'X-Requested-With': 'XMLHttpRequest'},
  timeout: 1000
});

4. 拦截器

您可以在请求或响应被 then 或 catch 处理前拦截它们：

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });

5. 错误处理

处理响应中的错误，可以捕获错误响应并做出相应处理：

axios.get('/someUrl')
  .catch(function (error) {
    if (error.response) {
      // 请求已发出，但服务器响应的状态码不在 2xx 范围内
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      // 请求已发出，但没有收到响应
      console.log(error.request);
    } else {
      // 发送请求时出错
      console.log('Error', error.message);
    }
  });

6. 取消请求

Axios 允许您取消请求，这在需要中断长时间运行的请求时非常有用：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

// 取消请求（消息参数是可选的）
source.cancel('Operation canceled by the user.');

Axios 的这些特性使其成为处理 HTTP 请求的强大工具。