首页 > 其他分享 >防抖节流axios

防抖节流axios

时间:2023-08-17 18:46:26浏览次数:41  
标签:防抖 axios return 节流 new error const config

import axios from 'axios'

function request(config) {
  const instance = axios.create({
    baseURL: 'http://localhost:3000/api',
    timeout: 10000
  })

// 防抖
const debounceTokenCancel = new Map()
instance.interceptors.request.use(config => {
  const tokenKey = `${config.method}-${config.url}`
  const cancel = debounceTokenCancel.get(tokenKey)
  if (cancel) {
    cancel()
  }
  return new Promise(resolve => {
    const timer = setTimeout(() => {
      clearTimeout(timer)
      resolve(config)
    }, 800)
    debounceTokenCancel.set(tokenKey, () => {
      clearTimeout(timer)
      resolve(new Error('取消请求'))
    })
  })
}, error => {
  console.log(error)
  return Promise.reject(error)
})

instance.interceptors.response.use(response => {
  return response
}, error => {
  console.log(error)
  return Promise.reject(error)
})

// 节流
let lastTime = new Date().getTime()
instance.interceptors.request.use(config => {
  const nowTime = new Date().getTime()
  if (nowTime - lastTime < 1000) {
    return Promise.reject(new Error('节流处理中,稍后再试'))
  }
  lastTime = nowTime
  return config
}, error => {
  console.log(error)
  return Promise.reject(error)
})

return instance(config)
}

export default request

  

标签:防抖,axios,return,节流,new,error,const,config
From: https://www.cnblogs.com/qinyuanchun/p/17638566.html

相关文章

  • ajax与axios
    概念:ajax(Asynchronous JavascriptAndXml):异步的js和xmlajax作用:1、使用ajax和服务器进行通信,就可以使用html+ajax替换jsp页面2、异步交互原生ajax<!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-8">  <title>Title</title&g......
  • axios封装
    importaxiosfrom'axios';consthttp_url="https://xxx.xxx.com"//get请求exportfunctiongetRequest(url,sendData){returnnewPromise((resolve,reject)=>{axios.get(http_url+url,{params:sendData}).then(res=&......
  • 【JavaScript42】axios拦截器
    在前端,我们能看到有些网站会对每次请求都添加加密信息.或者每次返回数据的时候,都有解密逻辑.那此时.你思考.不可能每次请求都要程序员去手动写加密逻辑.axios提供了拦截器.可以对每一个请求进行拦截.并修改请求的内容.拦截器还可以对响应进行拦截.并修改响应的数据.......
  • 手写防抖
     目录前言导语代码部分总结前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷导语手写防抖编辑代码......
  • vue自定义指令(防抖)
    importVuefrom'vue'/***按钮防抖,300毫秒内只触发一次请求*区分了一下传参和不传参的情况*///不传参数,用法:v-debounce="test_debounce"Vue.directive('debounce',{inserted:function(el,binding){lettimerel.addEventListener('click',......
  • 全局设置axios拦截器,请求增加username和token
    在main.js的newvue之前加入:axios.interceptors.request.use(config=>{//在发送请求前,获取新的tokenvarusername=window.localStorage.getItem('username');varauthorization=window.localStorage.getItem('token');......
  • axios 请求拦截(request)与响应拦截(response)
    1.请求拦截(request)请求拦截就是在发ajax之前做些什么!例如:可以在请求拦截里面加个token请求头,做些判断等等!语法:axios.interceptors.request.use((config)=>{},(error)=>{})1.1.参数1:(config)=>{}请求正确走的函数1.2.参数2:(error)=>{}请求错误走的函数1.3.代码案......
  • 摄像中的防抖技术
    简介手持成像设备拍照的过程中,很难控制设备处于完全保持静止状态,特别是使用长曝光(比如夜景拍照)或者长焦镜头进行拍摄(抖动对应的实际位移大),很容易由于相机抖动带来运动模糊。在拍摄视频的过程中,机身抖动也会导致视频画面的连续稳定性降低,特别是一些抖动比较厉害的拍摄场景(比如运动......
  • vue中axios多次相同请求取消上一个请求
    apiimportaxiosfrom'axios';exportfunctiongetDataFlowGraph(id,that){returnrequest({requestBase,url:`/workflowMetadata/getDataFlowGraph/${id}`,method:'get',//设置canceltoken用于多次请求,中断上一次请求cancel......
  • axios介绍
    1. axios介绍   42axios是一个基于 promise 的 HTTP 库,可在浏览器和 node.js 中。1.1 特性:  42o 从浏览器中创建 XMLHttpRequesto 从 node.js 发出 http 请求o 支持 Promise APIo 拦截请求和响应o 转换请求和响应数据o 取消请求o 自动转换JSON数据o 客户端支持......