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

最新推荐文章于 2023-09-07 16:11:28 发布

南宫知晓

最新推荐文章于 2023-09-07 16:11:28 发布

阅读量433

点赞数 1

分类专栏：前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_35540562/article/details/112719100

版权

本文介绍了如何利用axios的拦截器功能，在网络状况不佳时显示友好提示。通过在请求时设置id和定时器，若5秒内请求未响应则警告用户。拦截器的巧妙运用还能实现签名、数据加密等功能，推荐深入学习axios源码。

摘要由CSDN通过智能技术生成

简介

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

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

大家可以到这里来体验： http://ngzhixiao.gitee.io/heiibaiitoy/articles/axios/slownetwork/index.html

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

实现

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

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

    /**
     * 慢网络提示拦截器，在网络慢的情况提示用户等待
     */
    const slowNetworkInterceptor