什么是 Axios?

Axios 是一个基于 Promise 的 HTTP 客户端，用于浏览器和 Node.js。它支持所有现代浏览器，并且能够发送 XMLHttpRequests 和 Fetch 请求。

主要特性

• 支持浏览器和 Node.js 环境
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求（从 0.18.0 开始）
• 自动转换 JSON 数据
• 客户端防止 CSRF/XSRF

安装 Axios

在使用 Axios 之前，你需要先安装它。可以通过 npm 或 yarn 安装：

npm install axios
# 或者
yarn add axios

基本用法

发送 GET 请求

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

发送 POST 请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.error(error);
  });

配置默认值

你可以设置全局或实例级别的配置选项，比如默认的请求头或 baseURL。

// 设置全局默认值
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

// 创建一个新的 axios 实例并设置默认值
const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

使用axios统一的请求响应配置

创建新的axios实例

import axios from 'axios'
import router from "@/router";

//使用axios的构造函数初始化baseURL（根路径）timeout（超时时间）
const request = axios.create({
    baseURL: process.env.VUE_APP_BASEURL,//引用.env.development文件
    timeout: 30000
})

请求与响应拦截器

//使用请求拦截器
//统一加token
request.interceptors.request.use(config => {
    //设置请求体中的数据是json格式发送，并指定字符编码为utf-8避免乱码
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
    //获取存储在本地的token令牌
    let user = JSON.parse(localStorage.getItem('xm-user')) || {}
    //给请求头加上token属性
    config.headers['token'] = user.token

    console.log('请求拦截器打印：', config)

    return config
}, error => {
    console.log(error)
    //Promise 是 JavaScript 中处理异步操作的一种机制，代表了一个异步操作的最终完成（或失败）及其结果值。
    return Promise.reject(error)
})

//使用响应拦截器
//统一返回结果
request.interceptors.response.use(response => {
        let res = response.data;

        //兼容服务端返回的字符串数据
        if (typeof res === 'string') {
            //如果res有值则转成js的对象没值则返回原来数据
            res = res ? JSON.parse(res) : res
        }

        // 401 token令牌效验失败
        if (res.code === '401') {
            router.push('/login')
        }

        console.log('响应拦截器打印：', response)

        return res
    },
    error => {
        console.log(error)
        //Promise 是 JavaScript 中处理异步操作的一种机制，代表了一个异步操作的最终完成（或失败）及其结果值。
        return Promise.reject(error)
    }
)

取消请求

从 Axios 0.18.0 版本开始，你可以取消请求。这通常在用户导航离开当前页面时有用。

// 使用 CancelToken.source 工厂方法创建 cancel token
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 {
    // 处理错误
  }
});

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

错误处理

当请求失败时，axios 会返回一个 Error 对象，这个对象包含以下信息：

• error.config: 提供了为请求生成的配置信息。
• error.request: 如果请求已发出，则该属性是原生的 XMLHttpRequest 对象。
• error.response: 包含服务器响应的信息的对象，包括 status, data, headers 等等。
• error.message: 描述错误原因的字符串。
• error.isAxiosError: 一个布尔值，标识是否是由 Axios 抛出的错误。

axios.get('/user/12345').then(function (response) {
    console.log(response);
}).catch(function (error) {
    if (error.response) {
        // 请求已发出，但服务器响应的状态码不在 2xx 范围内
        console.log(error.response.data);
        console.log(error.response.status);
        console.log(error.response.headers);
    } else { // 发生在设置请求时触发的错误 
        console.log(error.message);
    }
});

并发请求

你可以使用 axios.all 来并发地发送多个请求，并通过 axios.spread 来处理结果。

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都完成了
  }));

其他功能

• 转换请求/响应数据：可以自定义请求或响应的数据转换。
• 超时设置：可以为请求设置超时时间。
• 自定义适配器：可以自定义适配器以支持不同的环境。