为了方便我们在vue中对axios的操作，我们通常对axios进行二次分装

• http.interceptors.request.use 里面设置请求头（token）
• http.interceptors.response.use 里面是对返回的数据进行操作

首先我们需要安装axios

安装

使用npm：

   $ npm install axios 

使用bower

$ bower install axios 

使用cdn:

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

二次分装axios

首先在src目录下创建utils/http.js，然后在http.js中配置

import axios from "axios";
const http = axios.create({
    baseURL: '',
    timeout: 10000,
});
// 添加请求拦截器
http.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
// 添加响应拦截器
http.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    const { data } = response
    return data;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

export default http

接口管理

在src目录下创建api/index.js

• url ：接口地址
• method ：请求方法
• data ：请求参数

import axios from "@/utils/http.js";

// 例如登录接口
export function Login(data) {
    return axios({
        method: 'post',
        url: '',
        data
    })
}

调用的话，在页面中先引入

import { Login } from "@/api";

请求超时的处理(没要求可不用写,只需在你之前写好的代码修改)

import axios from "axios";
const http = axios.create({
    baseURL: '',
    timeout: 10000,
});
const http = axios.create({
    baseURL: '',
    timeout: 50,
});
// 添加请求拦截器
http.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
http.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    const { data } = response
    return data;
}, function (error) {
    // 如果请求超时看看打印出啥
    console.dir(error)
    // 并且判断
    if(error.code==='ECONNABORTED'&&error.message.includes('timeout')){
        // 这里可以不用打印，看需求
        console.log('请求超时')
    }
    // 对响应错误做点什么
    return Promise.reject(error);
});

export default http

取消重复请求(没要求可不写,只需要在你之前写好的代码修改)

import axios from "axios";
const http = axios.create({
    baseURL: '',
    timeout: 10000,
});
const pending = []
const removePending = (config) => {
    let pendIndex = pending.forEach(v => {
        if (v.url === config.url
            && v.method == config.method
            && JSON.stringify(v.params) === JSON.stringify(config.params)
            && JSON.stringify(v.body) === JSON.stringify(config.body)
        ) {
            // 取消请求
            v.controller.abort()
            return true
        }
        return false
    })

    if (pendIndex >= 0) {
        pending.splice(pendIndex, 1);
    }
}
// 添加请求拦截器
http.interceptors.request.use(function (config) {
    removePending(config)
    const controller = new AbortController();
    config.signal = controller.signal;
    config.controller = controller;
    pending.push({ ...config })
    
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

export default http