vue3 axios

 

完整的代码, 可以复制引用

import axios from 'axios'; // 引入axios库
import router from '../router'; // 引入vue-router
import Utils from '../utils/utils'; // 引入自定义的工具函数
import { Toast } from 'vant'; // 引入vant的Toast组件，用于显示提示信息
import md5 from 'js-md5'; // 引入md5库，用于加密

let loadingInstance = null; // 定义一个loading变量，用于存储loading实例

let cancel; // 定义一个cancel变量，用于取消请求

// 请求拦截器
axios.interceptors.request.use(
    config => {
        // 设置请求头为JSON格式，意味着发送到服务器的数据类型为JSON字符串
        config.headers['Content-Type'] = 'application/json; charset=UTF-8';

        // 生成一个唯一的UUID，可以用作请求的标识符
        function generateUUID() {
            let d = new Date().getTime();
            let uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxx'.replace(/[xy]/g, function(c) {
                let r = (d + Math.random() * 16) % 16 | 0;
                d = Math.floor(d / 16);
                return (c == 'x' ? r : (r & 0x3 | 0x8)).toString(16);
            });
            return uuid;
        }

        let storeUuid = localStorage.getItem('store-uuid');
        let udid = generateUUID();
        if (storeUuid) {
            udid = storeUuid;
        } else {
            localStorage.setItem('store-uuid', udid);
        }

        let signData = '';

        // 对请求数据进行加密处理
        if (config.data && JSON.stringify(config.data) !== '{}') {
            config.data = 'molixg' + btoa(encodeURIComponent(JSON.stringify(config.data)));
            signData = config.data;
        }

        // 从localStorage中获取token值
        let token = Utils.storage.get('token');
        let timeStamp = new Date().getTime();
        let key = 'c5zKcW45KYGvrlCVEVvGysnjyCh3sg4r';

        // 生成请求的签名
        let sign = md5(`${key}${signData}${udid}${timeStamp}${config.url}${key}`).toUpperCase();

        // 从localStorage中获取channelInfo的值
        let channelInfo = Utils.storage.get('channelInfo');

        // 设置请求头，包括设备信息、时间戳、签名等
        config.headers = Object.assign({
            'UDID': udid,
            'TIMESTAMP': timeStamp,
            'SIGN': sign,
            'APP-TYPE': 3,
            'BRAND-MODEL': 'mobile',
            'TOKEN': token && token.data || '',
            'CHANNEL': channelInfo && channelInfo.data.channel_id || 100000,
            'INVITE-CODE': channelInfo && channelInfo.data.invite_code || 0,
            'PACK-NAME': 'e1',
            'APP-VERSION': '1.0.0',
            'APPLETS-VERSION': '1.0.0',
            'TUNNEL': btoa(encodeURIComponent(JSON.stringify(channelInfo && channelInfo.data || {}))),
        });

        return config;
    },
    error => {
        // 请求错误时执行的代码
        return Promise.reject(error);
    }
);

// 响应拦截器
axios.interceptors.response.use(
    (response) => {
        // 当响应数据是一个字符串，并且以"molixg"开始时，对响应数据进行解密处理
        if (response.data && typeof response.data === 'string' && response.data.indexOf("molixg") === 0) {
            response.data = JSON.parse(atob(response.data.replace('molixg', '')));
        }

        // 当响应的code为0时，关闭loading提示，并返回响应数据
        if (response.data && response.data.code === 0) {
            setTimeout(() => {
                if(loadingInstance) {
                    loadingInstance.close();
                }
            }, 80);
            return response.data;
        } else if (response.data.message) {
            // 当响应中包含错误信息时，使用Toast组件显示错误信息，并关闭loading提示
            Toast.allowMultiple();
            Toast({
                duration: 2000,
                message: response.data.message,
                position: 'top',
            });
            setTimeout(() => {
                if(loadingInstance) {
                    loadingInstance.close();
                }
            }, 2500);
            return [];
        }
    },
    (error) => {
        // 当请求出错时，关闭loading提示，并显示错误信息
        if (loadingInstance && error && error.msg) {
            loadingInstance.close();
        }
        if (error && error.response && error.response.status && (error.response.status === 401 || error.response.status === 402 || error.response.status === 403 || error.response.status === 422)) {
            router.push('/');
        }
        setTimeout(() => {
            if(loadingInstance) {
                loadingInstance.close();
            }
        }, 2500);
        return Promise.reject(error);
    }
);

封装get 和post请求

    // 定义一个apiConfig对象，用于配置axios的get和post请求方法
let apiConfig = {    

    // 定义get请求方法
    get(url) {        
        let enstr = null; // 初始化请求参数为null

        // 返回一个新的Promise对象
        return new Promise((resolve, reject) => {            
            // 使用axios进行get请求
            axios.get(url, {                
                params: enstr, // 设置请求参数
                // 下面的cancelToken用于取消请求，但在这里被注释掉了
                // cancelToken: new CancelToken(function executor(c) {
                //     cancel = c;
                // })
            })
            // 请求成功后，执行resolve方法
            .then((res) => {                
                resolve(res)            
            })
            // 请求失败后，执行reject方法
            .catch((error) => {                
                reject(error)            
            });
        })    
    },

    // 定义post请求方法
    post(url, json) {        
        // 返回一个新的Promise对象
        return new Promise((resolve, reject) => {            
            // 使用axios进行post请求
            axios.post(url, json, {              
                headers: {              } , // 设置请求头部信息
                // 下面的cancelToken用于取消请求，但在这里被注释掉了
                // cancelToken: new CancelToken(function executor(c) {
                //     cancel = c;
                // })
            })
            // 请求成功后，执行resolve方法
            .then((res) => {                
                resolve(res)            
            })
            // 请求失败后，执行reject方法
            .catch((error) => {                
                reject(error)            
            })        
        })    
    }
};

export default apiConfig;