自己动手封装axios通用方法并上传至私有npm仓库：详细步骤与实现指南

import axios from 'axios'
import {
    replayDefence,
    encryptRequest,
    distortDefence,
    requestTimeOut
} from './requestHandler'
axios.defaults.timeout = requestTimeOut || 20000; //超时响应
axios.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8'; // 配置请求头
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest'; // 区分ajax请求还是普通请求
axios.defaults.withCredentials = true; // axios 默认不发送cookie，需要全局设置true发送cookie

class HttpRequest {
    constructor() {
        this.instance = axios.create()
        this.interceptors()
    }
    interceptors() {
        // request拦截器
        this.instance.interceptors.request.use((config) => {
            if (config.url) {
                // 防重放
                replayDefence(config);
                // 报文加密
                encryptRequest(config);
                // 防篡改
                distortDefence(config);
                return config;
            }
        }, error => {
            return Promise.reject(error);
        })

        // respone拦截器
        this.instance.interceptors.response.use(async (res) => {
            if (res.status === 200) {
                // return Promise.resolve(res)
                return res
            } else {
                return Promise.reject(res)
            }
        }, error => {
            return Promise.reject(error)
        })
    }


    /**
     * 提交数据，同时支持  data 和 params
     * @param {*} url 
     * @param {*} params 
     * @returns 
     */
    post(url, params = {}) {
        return this.instance({
            url: url,
            method: 'post',
            data: params
        })
    }

    /**
     * 获取数据，只支持 params 传参
     * @param {*} url 
     * @param {*} params 
     * @returns 
     */
    get(url, params = {}) {
        return this.instance({
            url: url,
            method: 'get',
            params: params
        })
    }

    /**
     * 更新数据，同时支持  data 和 params
     * @param {*} url 
     * @param {*} params 
     * @returns 
     */
    put(url, params = {}) {
        return this.instance({
            url: url,
            method: 'put',
            data: params
        })
    }

    /**
     * 删除数据，只支持 params传参
     * @param {*} url 
     * @param {*} params 
     * @returns 
     */
    delete(url, params = {}) {
        return this.instance({
            url: url,
            method: 'delete',
            params: params
        })
    }
}

export default HttpRequest

const winConfig = window._CONFIG || {}
const {
    urlRandom,
    tampering,
    SM4Rncrypt,
    timeout
} = winConfig

export const requestTimeOut = timeout

/**
 * 防重放，这里添加时间戳和6位随机数
 * @param {*} config 
 */
export const replayDefence = (config) => {
    if (urlRandom && config.url) {
        const nonce = Math.floor(Math.random() * 1000000)
        config.params = {
            _t: Date.parse(new Date()),
            nonce,
            ...config.params
        }
    }
}

/**
 * 报文加密，这里使用base64代替加密，你可以替换成SM4加密
 * @param {*} config 
 */
export const encryptRequest = (config) => {
    if (SM4Rncrypt && config.url && config.data) {
        if (['post', 'put', 'delete'].includes(config.method)) {
            config.headers["Content-Type"] = "application/json";
            let jsonStr = JSON.stringify(config.data);
            config.data = btoa(jsonStr);
        }
    }
}

/**
 * 防篡改，这里是btoa(url+params+btoa(data))，你可以再加盐
 * @param {*} config 
 */
export const distortDefence = (config) => {
    if (tampering && config.url) {
        let validCode = `${config.url}`
        if (config.params) {
            for (let key in config.params) {
                validCode += `&${key}=${config.params[key]}`
            }
        }
        if (config.data && config.method != 'get') {
            validCode += SM4Rncrypt ? config.data : JSON.stringify(config.data);
        }
        console.log('validCode:', validCode)
        config.headers["sign"] = btoa(validCode)
    }
}

import HttpRequest from "./request";

const axios = new HttpRequest()

export default axios

import axios from "./index";

const baseURL = "";

//手机号归属地查询
export const getPhone = (params) => axios.post(baseURL + '/v2/phone', params)

//历史上的今天
export const getHistory = (params) => axios.post(baseURL + '/v2/history', params)

// Bing每日壁纸
export const getBing = (params) => axios.post(baseURL + '/v2/bing', params)

// 用户IP信息
export const getIp = (params) => axios.post(baseURL + '/v2/getip', params)

//随机颜色
export const getColor = (params) => axios.get(baseURL + '/v2/color', params)

import * as api from './api/axios'
Vue.prototype.$apis = api

console.log(this.$apis)
        this.$apis.getPhone({ tel: 13225750729 }).then(res => {
            console.log(res.data)
        })
        this.$apis.getHistory({}).then(res => {
            console.log(res.data)
        })
        this.$apis.getIp({}).then(res => {
            console.log(res.data)
        })
        this.$apis.getColor({}).then(res => {
            console.log(res.data)
        })

module.exports = {
  productionSourceMap: false,
  devServer: {
    proxy: 'https://tenapi.cn/'
  }
}

window._CONFIG = {
    urlRandom: true, //防重放
    tampering: true, //防篡改
    SM4Rncrypt: false, //报文加密
    timeout: 10000 //超时时间
}

{
  "scripts": {
    "plugin": "vue-cli-service build --target lib --name zouAxion --dest zouAxion src/api/index.js"
  },
}

npm run plugin

{
    "name": "zou-axion",
    "version": "0.1.2",
    "private": false,
    "license": "MIT",
    "description": "今天我发布一个zouAxion插件",
    "main": "zouAxion.umd.min.js",
    "scripts": {
      
    },
    "dependencies": {

    },
    "devDependencies": {

    }
  }

npm set registry http://localhost:4873/

npm publish

npm install axios
npm install zou-axios

import axios from "zou-axios";
const baseURL = "";
//历史上的今天
export const getHistory = (params) => axios.post(baseURL + '/v2/history', params)

import * as api from './api/axios'
Vue.prototype.$apis = api

this.$apis.getHistory({}).then(res => {
    console.log(res.data)
})