基于vue3 + vite + TS的axios封装

前言

在下前端小白，希望交到新的朋友，我属于又菜又爱玩的，写的不好，希望各位看官老爷们不要喷。

虽然TS和Vite出了很久，但没有真正写过项目，最近正好没什么事，摸鱼偷偷写个小项目，娱乐下自己，消遣下时间。Vite和TS的好处很多，其他大佬的文章里面写的很好，就不阐述了，有兴趣的小伙伴可以交流下!

这篇文章主要是记录我自己封装axios踩过的坑，平常技术栈主要是vue2，没用过TS,封装的axios的时候还是以惯有的思维进行封装的，走了些许弯路，深刻理解了看过不等于学会!废话不多说直接上代码！

VUE2的axios封装

import axios from 'axios' 
import { Message } from 'element-ui' 
import store from '@/store'
const service = axios.create()
const ERR_OK = 200
service.interceptors.request.use( config => {
// 发送请求拦截 //在这里将Token存起来 },
error => { // 发送请求错误 return Promise.reject(error) } )
service.interceptors.response.use( response => {
// 请求返回拦截 
const res = response.data 
if (res.status === 40101) { 
// token过期
Message.error( 'Token已过期' )
//强制用户登出 } 
return response
},
error => { 
return Promise.reject(error)
    } 
      ) 
function request(option, data) {
const { url = '', method = 'get', toastError, responseType = '' } = option
let config = { url, method, data, responseType, }
return new Promise((resolve, reject) => { service(config) 
.then(response => {
const data = response.data
if (!data || (data && data.code && data.code != ERR_OK)) {
if (toastError !== false) { 
vm.$showMessage('error', data.code)
}
reject(response.data) return 
}
resolve(response.data) }) .catch(error => { 
reject({ code: 0, data: error })
})
})
}
export { request }
调用请求的时候直接使用request请求即可 `

VUE3的axios封装

import router from '@/router'
import { useUserStore } from '@/store/user'
import axios, { type Method } from 'axios'
import { ElMessage } from 'element-plus'
//1.axios的配置
//1.1创建一个实例，配置基准地址，配置响应时间
// 1.2 添加请求拦截器，在请求头携带token
// 1.3 添加响应拦截器，判断业务是否成功，剥离无效的数据，401错误拦截去登录页面(删除当前用户信息)，

const baseURL = import.meta.env.VITE_APP_BASE_API
const instance = axios.create({
    baseURL,
    timeout: 5000,
})

instance.interceptors.request.use(
    config => {
        //修改config，比如请求头
        //获取token==>获取user
        const store = useUserStore()
        if (store.user?.token && config.headers) {
            config.headers.Authorization = `Bearer ${store.user.token}`
        }
        return config
    },
    err => Promise.reject(err)
)

//将来 axios.get()
// .then(res=>{ // res 就是后台的数据，之前的res.data })
// .catch(e=>{ // 200+10001这种情况，e就是res.data , 如果是状态吗的错误 401 403 404 e 就错误对象  })
instance.interceptors.response.use(
    res => {
        if (res.data.code !== 10000) {
            console.log(res.data.code, '36')

            // const $message= Message
            ElMessage(res.data.message || '网络异常')
            return Promise.reject(res.data)
        }
        return res.data
    },
    err => {
        // 请求报错，响应出错
        // 遇见401跳转登录
        // 1. 现在在 /user/patient 页面下，发起一个获取用户信息的请求，但是此时token失效
        // 2. 跳转登录页面，登录成功之后，需要跳转回 /user/patient 页面 （默认跳转 /user 首页）
        // vue2  $router 路由实例，提供路由相关函数操作  $route  路由相关信息，query params path 。。
        if (err.response.status === 401) {
            const store = useUserStore()
            store.delUser()
            router.push('/login')
        }
        return Promise.reject(err)
    }
)
type Data<T> = {
    code: string
    message: string
    data: T
}

const request = <T>(url: string, method: Method = 'get', submitData?: object) => {
    // 泛型的第二个参数，可以自定义响应数据类型
    return instance.request<T, Data<T>>({
        url,
        method,
        // 区分get和其他请求post
        // get 提交数据，选项：params
        // 其他请求post 提交数据，选项：data
        [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData,
    })
}

export { baseURL, instance, request }

结语

本文赶在兔年前写，预示着穷小白新的开始，2023年希望可以认识更多朋友，希望自己的技术在进一步，希望可以发12篇文章，写这篇文章的时候我已经踏上回家的路，跟2022的自己告别了，希望2023年的我和各位看官老爷，码运昌隆！

车上就说太多了，不喜勿喷！阿里嘎多！