用axios拦截器实现一个友好提示

684 阅读3分钟

简介

axios的拦截器是一个非常优秀的设计,借助它我们可以实现很多效果,节省重复的代码。

今天重点不是介绍axios,而是带领大家实现一个在网络较慢时弹出友好提示的拦截器。类似与下面的效果。

大家可以到这里来体验: ngzhixiao.gitee.io/heiibaiitoy…

如果大家是在电脑上访问的话,可以打开控制台的network选择网络的slow 3G会更接近真实的体验

实现

// 记录当前请求发出但未返回的id
    const requestMap = new Set()

    function generateId(url) {
      return url+new Date().getTime()+Math.random()
    }

    /**
     * 慢网络提示拦截器,在网络慢的情况提示用户等待
     */
    const slowNetworkInterceptor = function(axios, slowTime = 5000) {

      if(!axios.defaults.headers.common.__config){
        axios.defaults.headers.common.__config = {}
      }

      axios.defaults.headers.common.__config.slowNetworkConfig = {
        slowTime, // 定义网络慢的条件
        close: false,  // 允许在某些接口关闭提示
      }

      axios.interceptors.request.use(config => {
        const snc = config.headers.common.__config.slowNetworkConfig
        if(snc.close) return config
        const id = generateId(config.url)
        requestMap.add(id)
        snc.id = id
        setTimeout(() => {
          if(requestMap.has(id)) {
            Toast("网络似乎正在开小差,请耐心等待噢(ง ˙o˙)ว")
            requestMap.delete(id)
          }
        }, snc.slowTime);
        return config
      }, err => Promise.reject(err))

      axios.interceptors.response.use(res => {
        const snc = res.config.headers.__config.slowNetworkConfig
        if(snc.close) return res
        requestMap.delete(snc.id)
        return res
      }, err => {
        const snc = err.config.headers.__config.slowNetworkConfig
        if(snc.close) return Promise.reject(err)
        requestMap.delete(snc.id)
        return Promise.reject(err)
      })

      return axios
    }

    slowNetworkInterceptor(axios)

代码如上所示。

在每次请求时会生成一个id并将其存储到请求配置config中,用来标记这个请求。在最开始的时候我们定义了一个记录发出但未返回的网络请求的requestMap,将这个请求的id记录下来。然后开启一个定时器(我们默认给它一个5s),如果5s内请求返回了,就在返回的拦截器删除掉对应的id;如果5s内还未返回,我们就弹框提示用户当前网络较慢。

其中有一个细节,为什么id和定时器时长的信息不直接放到请求对象的config中而是放在headers上呢?放到headers上不久随着请求发出去了吗?

其实这axios的实现有关,在真正的发出请求前,axios会把config中的参数进行一个合并操作,但是只会合并它定义的一些参数,所以如果直接放到config上就会被排除掉,而对headers时会进行一个深拷贝,同时将common提上一级,这也能解释在请求拦截中设置在common中的参数为什么在返回拦截中能直接在headers上拿到。

这会导致我们在请求头多一个参数,是这样的:__config: [object Object],但在大多数情况下这没什么影响。

总结

这只是拦截器的其中一种用法,其实在实际的开发过程中,我们还可以通过拦截器实现请求的签名、请求数据的加解密、甚至能实现缓存请求的缓存等操作。

axios是一个设计很巧妙的库,而且他的代码很短,是学习优秀开源库很好的例子,推荐有时间都能去看看它的源码。

最后打个广告,大家可以关注我的公众号:前端慢慢学。我会不定时的在上面分享一些有意思的内容。