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

简介

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

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

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

实现

// 记录当前请求发出但未返回的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上拿到。

总结

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

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

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