前景提要:
ts 简易封装 axios,统一 API
实现在 config 中配置开关拦截器
axios 实现请求 loading 效果文章来源:https://www.toymoban.com/news/detail-741945.html
用一个数组保存当前请求的 url,此时还未响应。如果再次发起同样请求,比对 url 发现已经存在数组中,则拦截请求,提示重复提交。当该请求响应结束后,就将 url 从数组中剔除。则可再次发起上一次 url 的请求。文章来源地址https://www.toymoban.com/news/detail-741945.html
封装拦截器
import { AxiosError } from "axios";
import { ElMessage } from "element-plus";
import { MyAxiosResponse, MyInternalAxiosRequestConfig } from "./request";
let pendingUrl: string[] = []; // pending 状态的请求 url
const excludeUrl: string[] = ["/upload", "/upload/chunk"]; // 排除不需要拦截的url。比如并发上传文件的 url 都是一样的,就需要排除
/**
* 比较请求的 url
* @param {import("..").AxiosRequestConfig} config
* @returns
*/
export function compareUrl(config: MyInternalAxiosRequestConfig) {
// 配置中明确标出 debounce 为 false,则关闭请求防抖。不写或者为 true,则开启防抖
if (config.debounce === false) return config;
// 白名单 url 不防抖处理
if (config.url && excludeUrl.includes(config.url)) return config;
if (config.url && pendingUrl.includes(config.url)) {
// alert("重复请求");
ElMessage.warning("请求频繁");
throw new Error("请求频繁");
} else {
config.url && pendingUrl.push(config.url);
}
return config;
}
/**
* 请求成功,过滤请求完毕的 url
* @param {import("axios").AxiosResponse} res
* @returns
*/
export function filterFulfilledUrlOnFulfilled(res: MyAxiosResponse) {
pendingUrl = pendingUrl.filter(item => item != res.config.url);
return res;
}
/**
* 请求错误,过滤请求完毕的 url
* @param {import("axios").AxiosError} err
* @returns
*/
export function filterFulfilledUrlOnRejected(err: AxiosError) {
pendingUrl = pendingUrl.filter(item => item != err?.config?.url);
throw err;
}
补充 config 配置并注册拦截器
const DEFAULT_EXTRA_FEATURE_CONFIG = { showLoading: true, showMessage: true, debounce: true, retry: true };
/** 扩展 axios 的请求配置类型 */
export interface MyAxiosRequestConfig<TReqBodyData = any> extends AxiosRequestConfig<TReqBodyData> {
interceptors?: {
reqInterceptorOnFulfilled?: (config: InternalAxiosRequestConfig) => InternalAxiosRequestConfig;
reqInterceptorOnRejected?: (err: AxiosError) => any;
resInterceptorOnFulfilled?: (res: AxiosResponse) => AxiosResponse;
resInterceptorOnRejected?: (err: AxiosError) => Promise<AxiosError>;
};
showLoading?: boolean;
showMessage?: boolean;
debounce?: boolean;
retry?: boolean;
}
/** 给拦截器使用 */
export interface MyInternalAxiosRequestConfig extends InternalAxiosRequestConfig {
showLoading?: boolean;
showMessage?: boolean;
debounce?: boolean;
retry?: boolean;
}
import HttpRequest from "./http/request";
import { compareUrl, filterFulfilledUrlOnFulfilled, filterFulfilledUrlOnRejected } from "./http/debounceReq";
import { closeLoadingOnFulfilled, closeLoadingOnRejected, showLoading } from "./http/loading";
import { responseMessageOnFulfilled } from "./http/message";
import { getTokenResponseInterceptor, setAccessTokenRequestInterceptor } from "./http/token";
import { retryRequest } from "./http/retryRequest";
const httpRequest = new HttpRequest({
baseURL: import.meta.env.VITE_APP_API_BASE_URL,
timeout: import.meta.env.VITE_APP_API_TIMEOUT
});
// loading
httpRequest.getInstance().interceptors.request.use(showLoading);
httpRequest.getInstance().interceptors.response.use(closeLoadingOnFulfilled, closeLoadingOnRejected);
// debounceRequest
httpRequest.getInstance().interceptors.request.use(compareUrl);
httpRequest.getInstance().interceptors.response.use(filterFulfilledUrlOnFulfilled, filterFulfilledUrlOnRejected);
export default httpRequest;
``
到了这里,关于防止重复提交请求的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!