我们见过各种各样关于axios的网络封装,这次我采用多文件分层封装,希望你能在项目中直接拷贝可用,这就是我的目的。
创建axios.ts
文件
这一层是对请求基础配置的封装
import axios, { AxiosRequestConfig } from "axios";
export interface McAxiosRequestConfig extends AxiosRequestConfig {
extraConfig?: {
tokenRetryCount: number; // 标记当前请求的csrf token重试次数
};
}
const timeout = 60000; // 请求超时时间和延迟请求超时时间统一设置
const config: McAxiosRequestConfig = {
baseURL: (import.meta.env.VITE_BASE_URL as string) || "/",
timeout,
headers: {
"Content-Type": "application/json",
},
};
const instance = axios.create(config);
instance.interceptors.request.use(async (config: McAxiosRequestConfig) => {
if (!config.extraConfig?.tokenRetryCount) {
config.extraConfig = {
tokenRetryCount: 0,
};
}
return config;
});
instance.interceptors.response.use(
(response) => {
return response;
},
async (err) => {
if (axios.isCancel(err)) {
// 取消的请求,不报错
return;
}
if (err.message === "Network Error") {
return;
}
if (err.message.includes("timeout")) {
return;
}
if (err.response?.status >= 500) {
return;
}
const { data: responseData } = err.response || {};
const { status } = responseData || {};
if (status) {
switch (parseInt(status)) {
case 004001:
break;
default:
break;
}
}
return err.response;
}
);
export default instance;
创建request.ts
文件
这一层是对请求方式和请求响应参数的处理
import instance, { McAxiosRequestConfig } from './axios';
import { AxiosInstance, AxiosResponse } from 'axios';
type RequestMethod = 'get' | 'post';
class Request {
private instance: AxiosInstance;
constructor(instance: AxiosInstance) {
this.instance = instance;
}
/**
* @description: get请求,参数同axios的get方法,额外增加showLoading参数用于控制全局loading状态
* @param {string} url
* @param {McAxiosRequestConfig} config
* @return Promise<AxiosResponse<any>>
*/
public get(
url: string,
config: McAxiosRequestConfig = {}
): Promise<AxiosResponse<any>> {
return this.request('get', url, config);
}
/**
* @description: post请求,参数同axios的post方法,额外增加showLoading参数用于控制全局loading状态
* @param {string} url
* @param {McAxiosRequestConfig} config
* @return Promise<AxiosResponse<any>>
*/
public post(
url: string,
data: any = {},
config: McAxiosRequestConfig = {}
): Promise<AxiosResponse<any>> {
return this.request('post', url, config, data);
}
private async request(
method: RequestMethod,
url: string,
config: McAxiosRequestConfig,
...params: any
) {
const res = await this.instance[method](url, ...params, config);
return res;
}
}
export const request = new Request(instance);
使用
import { request } from "./request";
/**
* @description: 根据地图配置信息
* @param {string} url
* @return Promise<AxiosResponse<any>>
*/
export const getConfig = () => {
const config: any = {headers: { 'Cache-Control': 'no-cache' }}
return request.get("/config/config.json", config);
};
/**
* @description: 根据url获取国家码信息
* @param {string} url
* @return Promise<AxiosResponse<any>>
*/
export const getCountryCode = (url: string = ''): Promise<any> => {
return request.get("/getCountryCode", {baseURL: url});
};
点赞加关注,永远不迷路
每天一更新,创作拿命拼
网友评论