vue axios封装，以及vue.config.js配置前端代理

1，在src/utils/axios.js 新建文件，放公共请求方法

import axios from 'axios'
import {
    Toast
} from 'vant'

let loading = null;
// // 请求加载效果
function startLoading() {
    loading = Toast.loading({
        forbidClick: true,
        className: "custom-toast",
        loadingType: 'spinner',
        message: '加载中...',
        duration: 0
    })
}

// 关闭加载效果
function endLoading() {
    if (loading) loading.clear();
}
axios.defaults.timeout = 12000 // 请求超时时间
console.log(process.env.NODE_ENV,"魂晶")
//当为生产环境时，配置baseUrl，不然本地可以请求，打包出来不能请求
if (process.env.NODE_ENV === 'production') {
        axios.defaults.baseURL = 'http://10.114.14.99:9080'
    }
//请求头配置参考https://www.cnblogs.com/dreamcc/p/10752604.html
// axios.defaults.headers.post['Content-Type'] =
//     'application/x-www-form-urlencoded;charset=UTF-8' // post请求头的设置
// axios 请求拦截器
axios.interceptors.request.use(
    config => {
        startLoading()
        // 可在此设置要发送的token
        return config
    },
    error => {
        endLoading()
        return Promise.error(error)
    }
)

// axios respone拦截器
axios.interceptors.response.use(
    response => {
        endLoading()
        //console.log(response, "响应成功")
        if (response.status === 200 && (response.data.rspHead.code =="00000000")) {
            return Promise.resolve(response)
        } else {
            endLoading()
                console.log(response.data.rspHead.message, "走这里")
                Toast.fail({
                    className: "custom-toast",
                    message: response.data.rspHead.message
                })
            return Promise.reject(response)
        }
    },
    error => {
        endLoading()
        console.log(error, "响应失9999败")
        const responseCode = error
        //console.log(responseCode, "响应码")
        switch (responseCode) {
            // 401：未登录
            case 401:
                break
                // 404请求不存在
            case 404:
                console.log("网络请求超时")
                Toast.fail({
                    className: "custom-toast",
                    message: '网络请求超时'
                })
                break
            default:
                console.log(error.message, "走这里吗")
                Toast.fail({
                    className: "custom-toast",
                    message: error.message
                })
        }

        // 断网 或者 请求超时 状态
        if (!error.message) {
            // 请求超时状态
            if (error.message.includes('timeout')) {
                console.log('超时了')
                Toast.fail({
                    className: "custom-toast",
                    message: '请求超时，请检查网络是否连接正常'
                })
            } else {
                // 可以展示断网组件
                console.log('断网了')
                Toast.fail({
                    className: "custom-toast",
                    message: '请求超时，请检查网络是否连接正常'
                })
            }
            return
        }
        return Promise.reject(error.response)
    }
)
export function getRequest(url, params = {}) {
    let axiosData = {
        method: "post",
        url,
        data:params
    }
    return new Promise((reslove, reject) => {
        axios(axiosData)
            .then(res => {
                reslove(res);
            }).catch(err => {
                reject(err)
            })
    })
}

2，在src/api/index.js下新建放置所有api，在src/api/my/index.js新建index.js放置my页面的接口

import {
    getRequest
} from '@/utils/axios'
import myApi from "@/api/my/index.js";
export default {
    // 理财列表数据
    getPrdInfoList(params) {
        return getRequest(`/PrdInfoListQry`,
            params
        )
    },
      ...myApi,
}

3，将接口挂载到全局，在main.js中

import api from '@/api'
Vue.prototype.$api = api;

4，在组件中调用api

getAxiosRequest() {
            this.$api
                .getPrdInfoList({
                    reqHead: {
                        orgNo: "27000000",
                        // this.$shareStorageMsg.userId||
                        userId: "2017070990126081",
                        bankNo: "001",
                        transMedium: "01010202",
                        transBranch: "27000000",
                        servcId: "AS_PROD_INFO_LIST_QRY",
                        reqTime: "1595606400000",
                        servName: "产品列表查询",
                        txnOpr: "001",
                        transSeqNo: "201200170990126081",
                        pageIndex: 1,
                        pageSize: 10,
                    },
                    prodKindCode: "0103",
                })
                .then((res) => {
                    console.log(res, "理财列表数据成功");
                    if (
                        res.status === 200 &&
                        res.data.rspHead.code == "00000000"
                    ) {
                        this.fundLists = res.data.listSaleProdChnlQry;
                    }
                });
        },

5，在vue.config.js中配置代理

const url = 'http://10.114.14.99:9080'
  devServer: {
        proxy: {
            // //配置跨域
            '/': {
                target: url, // 接口的域名
                //ws: true, // 是否启用websockets
                changOrigin: true, // 开启代理，在本地创建一个虚拟服务端
                pathRewrite: {
                    '^/': '/'
                }
            }
        }
    },

tips：在开发环境中：axios中不用配置baseUrl，会自动匹配vue.config,js中的target，所以在生产环境中需要配置baseUrl，以防止打包后请求不到接口路径。