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()