Vue3实战笔记(10)—再次封装扩展AXIOS-拦截重复请求

文章目录


前言

对已经封装好了的工具类整体再加一层封装添加一些功能,便于灵活应用。例如增加防止重复点击功能,缓存功能等等。


一、封装shrequest.ts

新建shrequest.ts:

javascript 复制代码
import shaxios from '@/utils/shaxios'

let sh_req = (function () {
    let repeatUrl:Array<string> = [] //重复请求
    debugger
    return function(config?:any){
        debugger
        let url = config.url
        if(repeatUrl.indexOf(url) > -1){//如果有重复的url
            // return Promise.reject(new Error("请不要重复提交!"))   
            return Promise.reject({message:"请不要重复提交!"})
        }
        //如果没有重复请求就存入重复请求数组再发送请求,如果下次请求来了,成功之前没有清除数组就会认为是重复提交
        repeatUrl.push(url)
        //发送请求,成功后清除url
        return shaxios({
            ...config //扩展运算符的使用
        }).then((res:any)=>{
            repeatUrl = repeatUrl.filter((repUrl)=>{ //请求已经成功,删除数组中用于判断重复url的值
                return repUrl !== url
            })

            return res
        })
    }
})() //闭包,括号中用于传参(闭包作用?)

export {
    shaxios as shrequest, //导出原shaxios供使用
    sh_req //导出新封装了重复提交功能的新sh_req
}

二、使用步骤

代码如下(示例):

javascript 复制代码
import {sh_req,shrequest} from '@/utils/shrequest'

//注意由于定制拦截传参限制了config,sh_req只支持这种方式调用了
sh_req({
  method:"get",
  url:"/hellosh",
}).then((response: any)=>{
    console.log(response)
})

总结

在软件开发中,对已经封装好的工具类进行进一步的封装并添加新的功能是一种常见的设计模式。这种做法通常用于扩展现有工具类的功能、增强其灵活性或使其更加易于使用。建议配合前面文章结合实践。

相关推荐
伍哥的传说几秒前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
之歆几秒前
Python-封装和解构-set及操作-字典及操作-解析式生成器-内建函数迭代器-学习笔记
笔记·python·学习
yugi9878382 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊13 分钟前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听11 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿1 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉1 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽1 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课1 小时前
React useEffect 详解与运用
前端·react.js
我想说一句1 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript