axios+ts封装

http.ts

import axios from 'axios'
import type { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios'
import qs from 'qs'/*** 扩展AxiosRequestConfig，增加一些自定义的属性* isAuth: 自定义的参数中，用来判断是否携带token  因为AxiosRequestConfig本身定义的有 auth 所以这里使用 isAuth;*/
interface AxiosRequestConfigExt extends AxiosRequestConfig {isAuth?: boolean //是否携带tokenshowLoading?: boolean //是否显示加载框error401toLogin?: boolean //是否将401错误重定向到登录页面dataType?: string //数据类型queryData: any //查询参数
}let timerId: number = 0class Http {axios: AxiosInstance = nullconstructor() {this.axios = axios.create({baseURL: 'http://localhost:5173',timeout: 10000,})//请求拦截器this.axios.interceptors.request.use((config: AxiosRequestConfig): AxiosRequestConfig => {return config},(error: any) => {console.log(error)return Promise.reject(error)},)//响应拦截器this.axios.interceptors.response.use((response: AxiosResponse) => {return response.data},(error: any) => {console.log(error)let message = '网络错误'if (error.response.status === 401) {message = '未登录或登录已过期，请重新登录'// 这里可以重定向到登录页面window.location.href = '/login'}if (error.response.status === 403) {message = '权限不足，请联系管理员'}if (error.response.status === 404) {message = '请求地址不存在'}if (error.response.status === 500) {message = '服务器内部错误'}console.log(message)//弹出提示框//showToast(message)return Promise.reject(error)},)}request<T>(config: AxiosRequestConfigExt): Promise<T> {let {url,queryData = {},isAuth = false,showLoading = false,method = 'GET',dataType = 'json',} = configif (showLoading) {//显示加载框 //如果请求的响应时间小于200毫秒 则不显示加载框//因为 timerid 是一个全局变量，所以每次请求都会覆盖之前的定时器//如果请求都比较快的话，只有最后一次请求才会显示加载框clearTimeout(timerId)timerId = setTimeout(() => {console.log('这里添加显示加载框的代码')}, 200)}if (isAuth) {let token = localStorage.getItem('token')if (!token) {//这里可以返回错误，也可以重定向到登录页面return Promise.reject('未登录')}config.headers['token'] = token}if (method?.toUpperCase() === 'GET') {return this.axios.get(url, { params: queryData })}if (method?.toUpperCase() === 'POST') {if (dataType === 'json') {return this.axios.post(url, queryData, { headers: { 'Content-Type': 'application/json' } })} else if (dataType === 'formData') {let formData = new FormData()Object.keys(queryData).forEach((key) => {formData.append(key, queryData[key])})return this.axios.post(url, formData, {headers: { 'Content-Type': 'multipart/form-data' },})} else if (dataType === 'qs') {return this.axios.post(url, qs.stringify(queryData), {headers: { 'Content-Type': 'application/x-www-form-urlencoded' },})}}return Promise.reject('请求方式不正确')//后面如果有其他的请求方式，可以继续扩展}
}export default new Http()