Axios请求封装，项目打包后修改请求地址配置文件——详细版

1.请求封装(service/index.js文件)

/**
 *  @author
 * @description  接口封装
 */
import axios from 'axios'
import router from "../router/index.ts";

const getIp = function (config) {
    let url = "";
    //configJson 为在App.vue里面调用方法获取的接口地址配置文件
    let configJson = JSON.parse(sessionStorage.getItem('configJson')); 
    if (process.env.NODE_ENV === "development") {//开发环境
        url = configJson.localServer;
    } else {//打包环境
        url = configJson.unitServer;
    }
    return url
}
const service = axios.create({
    baseURL: "",
    withCredentials: true,//携带cookie
    timeout: 300000   //请求超时时间
    // timeout: 0  //无限制
})

// request拦截器 request interceptor
service.interceptors.request.use(
    config => {
        config.baseURL = getIp(config);
        //loginInfo 为登录时存在sessionStorage里面的登录信息
        const loginInfo = JSON.parse(sessionStorage.getItem('loginInfo'));
        const token = loginInfo ? loginInfo.token : null;
        if (token) {
            // config.headers.Authorization = `Bearer ${token}`;
            config.headers.Authorization = token;
            // config.headers.Worknum = loginInfo.user_id;
        } else {
            // console.log(router.currentRoute._value.fullPath, "router")
            // console.log(router, "router")
            if (router.currentRoute._value.fullPath !== '/login') {
                router.replace({
                    path: '/'
                });
            }
        }
        return config;
    },
    err => {
        return Promise.reject(err);
    }
);


service.interceptors.response.use(response => {
    const res = response.data;
    if (response.data && res.code === 401) {
        router.replace({
            path: '/'
        });
        return Promise.reject(res)
    } else {
        return Promise.resolve(res)
    }
}, error => {
    return Promise.reject(error)
})
export default service

2.获取请求地址配置文件的方法（我是在App.vue组件加载时调用的，以下两个方法根据情况选其一）

//vue3项目config.json放在public文件下
export function getConfig() {
    axios.get('./config.json').then(res => {
        console.log(res, "发请求获取config.json");
        if (res.status === 200) {
            sessionStorage.setItem("configJson",  JSON.stringify(res.data));
        } else {
            getConfig()
        }
    })
}

//vue2项目config.json放在static文件下
export function getLocalConfig() {
  axios.get('../../static/json/config.json').then(res => {
    console.log(res, "发请求获取config.json");
    if (res.status === 200) {
      sessionStorage.setItem("configJson", JSON.stringify(res.data));
    } else {
      getLocalConfig()
    }
  })
}

3.请求地址配置文件内容（config.json），vue3项目config.json放在public文件下，vue2项目config.json放在static文件下

{
  "unitServer": "http://ip:端口",//打包环境
  "localServer": "http://ip:端口",//开发环境
}

4.接口配置文件（api/utils.js）

import request from '../service/index'  //引入封装的请求,路径根据实际的来

// 获取数据
export function getData(page, size) {
    return request({
        url: `/api/taobao/getDevice?page=${page}&size=${size}`,
        method: 'get',
    })
}

// 获取数据
export function getData1(obj) {
    return request({
        url: `/api/taobao/getDevice`,
        method: 'get',
        params: obj
    })
}

// 新增
export function addData(data) {
    return request({
        url: `/api/taobao/addDevice`,
        method: 'post',
        data: data,
        //timeout: 0 ,//也可单独为接口设置超时时间
    })
}

// 修改
export function UpdateData(data) {
    return request({
        url: `/api/taobao/updateDevice`,
        method: 'put',
        data: data
    })
}

// 删除
export function DelData(deviceid) {
    return request({
        url: `/api/taobao/deleteDevice/${deviceid}`,
        method: 'delete',
    })
}

5.接口调用：在需要调用接口的页面中引入接口配置文件（api/utils.js）中导出的接口，然后直接调用

  getData("1","20").then(res => {
    if (res.msg === "ok") {
      console.log(res.data)//接口返回内容
    }
  })