Vue3中使用typescript封装axios的实例详解 Vue3中使用typescript封装axios的实

这个axios封装，因为是用在vue3的demo里面的，为了方便，在vue3的配置里面按需加载element-plus
封装axios
http.ts

import axios, { AxiosRequestConfig, AxiosRequestHeaders, AxiosResponse } from 'axios'import { IResponseData } from '@/types'import { ElMessage, ElLoading, ILoadingInstance } from 'element-plus'type TAxiosOption = {baseURL: string; timeout: number; }const config = {baseURL: '/',timeout: 120000}let loading: ILoadingInstance; class Http {// service: AxiosInstance; service; constructor(config: TAxiosOption) {this.service = axios.create(config)/* 请求拦截this.service.interceptors.request.use(config => config, error => Promise.reject(error))*/this.service.interceptors.request.use((config: AxiosRequestConfig) => {/* 业务逻辑1. 开启全屏loading动画2. 数据加密config.data3. 请求头加上token，结合vuex或localstorage：if(store.getters.token) config.headers['x-token'] = store.getters.tokenelse 重定向4. ……*/loading = ElLoading.service({lock: true,text: 'Loading',spinner: 'el-icon-loading',background: 'rgba(255, 255, 255, 0.7)',})if (localStorage.getItem('token')) {(config.headers as AxiosRequestHeaders).authorization = localStorage.getItem('token') as string}return config}, error => {/* 请求错误 1. 关闭全屏loading动画2. 重定向到错误页*/loading.close()return Promise.reject(error) // 为了可以在代码中catch到错误信息})/* 响应拦截this.service.interceptors.response.use(response => response.data, error => Promise.reject(error))*/this.service.interceptors.response.use((response: AxiosResponse) => {/* 1. 关闭全屏loading动画2. 数据解密3. 根据 response.data.code 做不同的错误处理4. ……*/loading.close()const data = https://www.it610.com/article/response.dataconst { code } = dataif (code !=='000000') {ElMessage.error(data.message)return Promise.reject(data)}return response.data}, error => {loading.close()ElMessage.error('请求失败',)return Promise.reject(error)})}get(url: string, params?: object, _object = {}): Promise> {return this.service.get(url, { params, ..._object })}post(url: string, params?: object, _object = {}): Promise> {return this.service.post(url, params, _object)}put(url: string, params?: object, _object = {}): Promise> {return this.service.put(url, params, _object)}delete(url: string, params?: any, _object = {}): Promise> {return this.service.delete(url, { params, ..._object })}}export default new Http(config)

【Vue3中使用typescript封装axios的实例详解】types/index.ts: 接口返回数据的类型定义