我是靠谱客的博主 无奈故事,这篇文章主要介绍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)

最后

以上就是无奈故事最近收集整理的关于vue的axios封装的全部内容,更多相关vue内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(47)

评论列表共有 0 条评论

立即
投稿
返回
顶部