Axios

主要特点和功能

1. 基于 Promise： Axios 使用 Promise API，适用于现代浏览器和 Node.js。
2. 拦截请求和响应： 你可以在请求或响应被处理之前拦截它们，进行修改或处理错误。
3. 转换请求和响应数据： 在请求或响应被发送到 .then 或 .catch 之前对其进行修改。
4. 取消请求： 可以取消请求，使用 CancelToken API。
5. 自动转换 JSON 数据： 请求和响应数据会自动转换为 JSON 格式。
6. 客户端支持保护（防止跨站点请求伪造）： 自动设置合适的 HTTP headers。
7. 支持节点环境： Axios 还支持 Node.js，支持 HTTP 基本身份验证和 HTTP 代理。
8. 支持上传进度和下载进度： 你可以处理大文件的上传和下载进度。
9. 错误处理： 更加友好的错误处理，提供更多错误信息。
10. 请求和响应数据的序列化： Axios 能够处理和转换请求和响应数据，使其更易于使用。

安装和使用

安装

你可以通过 npm 或 yarn 安装 Axios：

npm install axios
# 或者使用 yarn
yarn add axios

基本使用

import axios from 'axios';

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

// 发送 POST 请求
axios.post('https://api.example.com/data', {
    key1: 'value1',
    key2: 'value2'
  })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error posting data:', error);
  });

配置

你可以创建一个带有自定义配置的实例：

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

instance.get('/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error('Error fetching data:', error);
  });

拦截器

你可以在请求或响应被处理之前拦截它们：

// 添加请求拦截器
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);
});

取消请求

你可以使用 CancelToken 取消请求：

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// 取消请求
cancel();

错误处理

Axios 提供了丰富的错误信息，包括请求配置、响应数据和 HTTP 状态码：

axios.get('/user/12345')
  .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);
    }
    console.log(error.config);
  });

上传和下载进度

你可以处理上传和下载的进度：

const config = {
  onUploadProgress: function(progressEvent) {
    let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log('Upload Progress: ' + percentCompleted + '%');
  },
  onDownloadProgress: function(progressEvent) {
    let percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log('Download Progress: ' + percentCompleted + '%');
  }
};

axios.post('/upload/file', data, config)
  .then(response => {
    console.log(response.data);
  });