防止重复提交请求

这篇具有很好参考价值的文章主要介绍了防止重复提交请求。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

防止重复提交请求,Axios,javascript,重复提交请求,axios,typescript,前端
前景提要:
ts 简易封装 axios,统一 API
实现在 config 中配置开关拦截器
axios 实现请求 loading 效果

用一个数组保存当前请求的 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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CRM项目为新增用户设置对应的前端校验规则并发送Axios请求到后端将表单数据提交用户信息------CRM项目

    template     el-button type=\\\"primary\\\" @click=\\\"addUser()\\\"新增用户/el-button     el-button type=\\\"danger\\\"批量删除/el-button     el-table         :data=\\\"userList\\\"         style=\\\"width: 100%\\\"         @selection-change=\\\"handleSelectionChange\\\"             !-- 复选框    --         el-table-column type=\\\"selection\\\" width=\\\"33%\\\"

    2024年02月19日
    浏览(38)
  • TypeScript封装Axios

    因axios基础使用十分简单,可参考axios官方文档,这里不在介绍他基本用法,主要讲解拦截器。 拦截器主要分为两种, 请求拦截器 和 响应拦截器 。 请求拦截器 :请求发送之前进行拦截,应用于我们在请求发送前需要对请求数据做一些处理。例如: 携带token 当请求时间过长

    2024年02月11日
    浏览(47)
  • 前端如何防止接口重复提交

    接口重复提交指的是在网络通信中,同一个请求被客户端多次发送到服务器端的情况。这种情况可能由于多种原因导致,例如用户在等待期间多次点击提交按钮、网络超时后客户端重新发送请求、客户端发送的请求在网络传输过程中出现重复等。 接口重复提交可能会导致多种

    2024年04月22日
    浏览(34)
  • springBoot防止重复提交

    两种方法, 一种是后端实现,较复杂,要通过自定义注解和AOP以及Redis组合实现 另一种是前端实现,简单,只需通过js,设置过期时间,一定时间内,多次点击按钮只生效一次 自定义注解+AOP+Redis 自定义异常类和全局异常处理 自定义异常类:CustomException 全局异常处理:Cust

    2024年02月11日
    浏览(38)
  • java防止重复提交的方法

      为了防止重复提交,可以采用以下几种方法: 1. 令牌机制(Token) 在表单中添加一个隐藏字段,用于存放一个随机生成的令牌(Token)。当用户提交表单时,将令牌一起提交到服务器。服务器接收到请求后,首先检查令牌是否存在,如果不存在则拒绝请求;如果存在,则将

    2024年02月01日
    浏览(37)
  • 微信小程序防止重复提交

    微信小程序在真机测试时,遇到这样一种情况:当网络条件差或卡顿的情况下,进行某项操作时,使用者会认为点击无效而进行多次点击,致使多次跳转页面或多次上传同一表单,导致函数或接口被多次调用,实际上使用者只想调用函数和接口一次。 添加节流阀,即按下按钮

    2024年02月13日
    浏览(47)
  • 【axios网络请求库】认识Axios库;axios发送请求、创建实例、创建拦截器、封装请求

    功能特点: 在浏览器中发送 XMLHttpRequests 请求 在 node.js 中发送 http请求 支持 Promise API 拦截请求和响应 转换请求和响应数据 支持多种请求方式: axios(config) axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, c

    2024年02月10日
    浏览(41)
  • axios模拟表单提交

    axios默认是application/json方式提交,controller接收的时候必须以@RequestBody的方式接收,有时候不太方便。如果axios以application/x-www-form-urlencoded方式提交数据,controller接收的时候只要保证名字应对类型正确即可。 前端代码: 这是利用Element-Plus模态框提供的三个SLOT(footer,header和

    2024年02月11日
    浏览(32)
  • SpringBoot 整合redis + Aop防止重复提交 (简易)

    redis下载 解压 安装 看一下就会有  进入redis-6.0.8下的src目录 (  src 目录下有编译后的 redis 服务程序 redis-server,还有用于测试的客户端程序 redis-cli:) 然后启动 redis默认端口号 6379,建议更改。redis.conf是配置文件在  与src是同级目录。 要远程  #去掉保护模式,注释掉bi

    2024年02月12日
    浏览(39)
  • 【axios】vue中axios的请求配置

    注意:本文实例化为TS版 axios 是一个基于 promise 封装的网络请求库,它是基于 原生XHR 进行二次封装,可以说是 XHR 的一个子集,而 XHR 又是 Ajax 的一个子集 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求

    2024年02月10日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包