如何使用axios结合Promise实现无感刷新token的长尾？

本文共计2398个文字，预计阅读时间需要10分钟。

需求+近期遇到的需求：前端登录后，后端返回token和token有效期。当token过期时，需使用旧token去获取新的token，前端需做到无痛刷新token，即请求刷新token时用户无感知。

需求

最近遇到个需求：前端登录后，后端返回token和token有效时间，当token过期时要求用旧token去获取新的token，前端需要做到无痛刷新token，即请求刷新token时要做到用户无感知。

需求解析

当用户发起一个请求时，判断token是否已过期，若已过期则先调refreshToken接口，拿到新的token后再继续执行之前的请求。
这个问题的难点在于：当同时发起多个请求，而刷新token的接口还没返回，此时其他请求该如何处理？接下来会循序渐进地分享一下整个过程。

实现思路

由于后端返回了token的有效时间，可以有两种方法：

方法一：
在请求发起前拦截每个请求，判断token的有效时间是否已经过期，若已过期，则将请求挂起，先刷新token后再继续请求。

方法二：
不在请求前拦截，而是拦截返回后的数据。先发起请求，接口返回过期后，先刷新token，再进行一次重试。

两种方法对比

方法一

• 优点： 在请求前拦截，能节省请求，省流量。