vue的axios封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
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)