对于TS新手来说，封装一个axios也不是件简单的事情。在这里分享一段arco.design pro vue中对axios interceptor的封装。
import axios from 'axios';import type { AxiosRequestConfig, AxiosResponse } from 'axios';import { Message, Modal } from '@arco-design/web-vue';import { useUserStore } from '@/store';import { getToken } from '@/utils/auth';export interface HttpResponse<T = unknown> { // status: number; msg: string; code: number; data: T;}if (import.meta.env.VITE_API_BASE_URL) { // axios.defaults.baseURL = import.meta.env.VITE_API_BASE_URL;}axios.interceptors.request.use( (config: AxiosRequestConfig) => { // let each request carry token // this example using the JWT token // Authorization is a custom headers key // please modify it according to the actual situation const token = getToken(); if (token) { if (!config.headers) { config.headers = {}; } config.headers.Authorization = `Bearer ${token}`; } return config; }, (error) => { // do something return Promise.reject(error); });// add response interceptorsaxios.interceptors.response.use( (response: AxiosResponse<HttpResponse>) => { const res = response.data; // if the custom code is not 20000, it is judged as an error. if (res.code !== 2000) { Message.error({ content: res.msg || 'Error', duration: 5 * 1000, }); // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired; if ( [50008, 50012, 50014].includes(res.code) && response.config.url !== '/api/user/info' ) { Modal.error({ title: 'Confirm logout', content: 'You have been logged out, you can cancel to stay on this page, or log in again', okText: 'Re-Login', async onOk() { const userStore = useUserStore(); await userStore.logout(); window.location.reload(); }, }); } return Promise.reject(new Error(res.msg || 'Error')); } return res; }, (error) => { Message.error({ content: error.msg || 'Request Error', duration: 5 * 1000, }); return Promise.reject(error); });
实际使用：
export interface ChatRecord { id: number; username: string; content: string; time: string; isCollect: boolean;}export function queryChatList() { return axios.post<ChatRecord[]>('/api/chat/list');}
这个封装非常简单，没有任何复杂的处理，而且又对类型进行了详细的指定。
