美文网首页
Axios全局接口防抖、节流封装

Axios全局接口防抖、节流封装

作者: 半夜成仙 | 来源:发表于2023-08-03 17:21 被阅读0次
    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
    
    作者:ShihHsing
    链接:https://juejin.cn/post/7225133152490160187
    来源:稀土掘金
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
    

    相关文章

      网友评论

          本文标题:Axios全局接口防抖、节流封装

          本文链接:https://www.haomeiwen.com/subject/bpimpdtx.html