axios常用请求封装 vue3.0

import axios from 'axios'

import qs from 'qs'

import { ElMessage } from 'element-plus'

import store from '@/store'

import cache from '@/utils/cache'



// axios实例

const service = axios.create({

    baseURL: import.meta.env.VITE_API_URL as any,

    timeout: 60000,

    headers: { 'Content-Type': 'application/json;charset=UTF-8' }

})



// 请求拦截器

service.interceptors.request.use(

    (config) => {

        const userStore = store.userStore

        if (userStore?.token) {

            config.headers.Authorization = 'Bearer ' + userStore.token

        }



        config.headers['Accept-Language'] = cache.getLanguage()



        // 追加时间戳，防止GET请求缓存

        if (config.method?.toUpperCase() === 'GET') {

            config.params = { ...config.params, t: new Date().getTime() }

        }



        if (Object.values(config.headers).includes('application/x-www-form-urlencoded')) {

            config.data = qs.stringify(config.data)

        }



        return config

    },

    error => {

        return Promise.reject(error)

    }

)



// 响应拦截器

service.interceptors.response.use(

    response => {

        if (response.status !== 200) {

            return Promise.reject(new Error(response.statusText || 'Error'))

        }



        const res = response.data

        // 响应成功

        if (res.code === 0) {

            return res

        }



        // 错误提示

        ElMessage.error(res.msg)



        // 没有权限，如：未登录、登录过期等，需要跳转到登录页

        if (res.code === 401) {

            store.userStore.setToken('')

            location.reload()

        }



        return Promise.reject(new Error(res.msg || 'Error'))

    },

    error => {

        ElMessage.error(error.message)

        return Promise.reject(error)

    }

)



// 导出 axios 实例

export default service

store.js

import { userStore } from './modules/user'

import { routerStore } from './modules/router'

import { appStore } from './modules/app'

import { tabsStore } from './modules/tabs'



const store: any = {}



export const registerStore = () => {

    store.userStore = userStore()

    store.routerStore = routerStore()

    store.appStore = appStore()

    store.tabsStore = tabsStore()

}



export default store

user.js

import { defineStore } from 'pinia'

import { useLoginApi, useLogoutApi } from '@/api/login'

import { useUserInfoApi } from '@/api/user'

import cache from '@/utils/cache'



export const userStore = defineStore('userStore', {

    state: () => ({

        user: {

            id: '',

            username: '',

            email: '',

            avatar: ''

        },

        token: cache.getToken()

    }),

    actions: {

        setUser(val: any) {

            this.user = val

        },

        setToken(val: any) {

            this.token = val

            cache.setToken(val)

        },

        // 用户登录

        async loginAction(loginForm: any) {

            const res: any = await useLoginApi(loginForm)

            this.setToken(res.access_token)

        },

        // 获取用户信息

        async getUserInfoAction() {

            const { data } = await useUserInfoApi()

            this.setUser(data)

        },

        // 用户退出

        async logoutAction() {

            await useLogoutApi()



            // 移除 token

            this.setToken(null)

        }

    }

})



页面使用

import service from '@/utils/request'



export const useLoginApi = (data: any) => {

    return service.post('/data/login.json', data, {

        auth: {

            username: 'web',

            password: '123456'

        },

        headers: {

            'Content-Type': 'application/x-www-form-urlencoded'

        }

    })

}



export const useLogoutApi = () => {

    return service.post('/data/success.json')

}