vue的axios封装

90 阅读 0 评论 60 点赞

我是靠谱客的博主无奈故事，最近开发中收集的这篇文章主要介绍vue的axios封装，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

import axios from "axios";
//pinia的仓库
import { GlobalStore } from "../stores";

// let globalStore = GlobalStore()

const config = {
    baseURL: "http://127.0.0.1:3000",
    timeout: 5000,
    withCredentials: false
}

class RequestHttp {
    service = null
    constructor(config) {
        this.service = axios.create(config)

        /**
         * @description 请求拦截器
         * 客户端发送请求 -> [请求拦截器] -> 服务器
         * token校验(JWT) : 接受服务器返回的token,存储到vuex/pinia/本地储存当中
         */
        this.service.interceptors.request.use((config) => {
            const globalStore = GlobalStore();

            const token = globalStore.token;
            return { ...config, headers: { ...config.headers, "x-access-token": token } }

        }, (err) => {
            return Promise.reject(error);
        })

        /**
         * @description 响应拦截器
         *  服务器换返回信息 -> [拦截统一处理] -> 客户端JS获取到信息
         */

        this.service.interceptors.response.use(
            (res) => {
                const { data } = res
                const globalStore = GlobalStore();
                // if(data.code==200){

                // }
                return data
            },
            async (err) => {
                return Promise.reject(err)
            }
        )


    }


    get(url, params = {}) {
        return this.service.get(url, params)
    }

    post(url, params = {}) {
        return this.service.post(url, params)
    }

}

export default new RequestHttp(config)