二次封装axios

import axios from 'axios'
import app from '../../main'   //这里的app绑定了element-ui的自定义loading
import { Message } from 'element-ui'   //这个是报错提示
const serivce = axios.create({
    baseURL: '你的url',// 基础路径
})
let loadObj = null;
let loadingNum = 0;
let loadedNum = 0;
let loadingArr = [];

//注意：请求的参数可写data:{loading：'.dsfdsf'},params:{loading：'.dsfdsf'}或者{loading: fdsfdf}
//目前只处理了get请求和post请求
serivce.interceptors.request.use(
    config => {
        let query = {}
        if(config.data) {//data中写loading的情况
            query = JSON.parse(JSON.stringify(config.data))
            if(query.loading&&query.loading.constructor == String) {
                let load = {
                    load: app.$loading({ target: query.loading }),
                    url: `${config.baseURL}${config.url}`
                }
                loadingArr.push(load)
                Reflect.deleteProperty(query, 'loading')
            }
        }else if(config.params) {//params中写loading的情况
            query = JSON.parse(JSON.stringify(config.params))
            if(query.loading&&query.loading.constructor == String) {
                let load = {
                    load: app.$loading({ target: query.loading }),
                    url: `${config.baseURL}${config.url}`
                }
                loadingArr.push(load)
                Reflect.deleteProperty(query, 'loading')
            }
        }else if(config.loading&&config.loading.constructor == String) {//直接写loading（局部）的情况{loading: '选择器'}
            let load = {
                load: app.$loading({ target: config.loading }),
                url: `${config.baseURL}${config.url}`
            }
            loadingArr.push(load)
            Reflect.deleteProperty(config, 'loading')
        }else if(config.loading === true) {//全局加载直接{loading: true}
            loadObj = app.$loading();
            Reflect.deleteProperty(config, 'loading')
        }
        loadingNum += 1//只要是请求，就记录开始计数
        let userid = sessionStorage.getItem('userinfo')?JSON.parse(sessionStorage.getItem('userinfo')).id:''    //这里是扩展每个请求携带的参数
        if(userid) {
            query.userid = userid
        }
        config.params = {
            ...query
        }
        return config
    },
    error => {
        console.log(error)
        loadingNum += 1;
        if(loadedNum==loadingNum){
            if(loadObj) loadObj.close();
        }
        return Promise.reject(error)
    }
)
serivce.interceptors.response.use( // 回复拦截，针对部分状态码进行处理
    response => {
        let url = response.config.url
        for (let i = 0; i < loadingArr.length; i++) {
            if(url == loadingArr[i].url) {
                loadingArr[i].load.close()
                loadingArr.splice(i, 1)
            }
        }
        loadedNum += 1;
        if(loadedNum == loadingNum){
            if(loadObj) loadObj.close();
        }
        if (response.data.code !== app.gbl.code) {  //不为200就报提示框的错误
            Message({
                showClose: true,
                message: response.data.message,
                type: 'error'
            })
        }
        return response.data
    },
    error => {
        console.log(error)
        let url = error.config?error.config.url:''
        for (let i = 0; i < loadingArr.length; i++) {
            if(url == loadingArr[i].url) {
                loadingArr[i].load.customClass = 'loadfail'
                loadingArr[i].load.setText('加载失败')
                loadingArr[i].load.spinner = 'iconfont icon-load-fail'  //这个是加载失败的图标类名
                loadingArr.splice(i, 1)
                break
            }
        }
        loadedNum += 1;
        if(loadedNum == loadingNum){
            if(loadObj) loadObj.close();
        }
        Message({
            showClose: true,
            message: error.response.data.message,
            type: 'error'
        })
        return Promise.reject(error)
    }
)
export default serivce

本文使用了element-ui的自定义加载组件，弹窗提示组件

支持局部加载，全局加载，文章中的代码是默认没有加载的，所以每个接口都需要你去加上{loading:true}这个属性，当然你也可以修改这一段，的条件，直接去掉，就能默认全局加载了，分享到此结束，希望能给大家带来帮助。