在请求发送阶段(未取得返回结果时),前端(浏览器)取消请求,捕获该状态,并做异常拦截处理。

思路:
1、记录每个请求的cancelToken。
2、在页面路由更新时(从页面A进入页面B时)取消A页面未完成的请求。
3、把"取消请求"的异常状态做一个特殊的异常标记。
4、全局请求拦截器对这种特殊的异常标记做静默处理。

代码实现:
1、全局的请求实例拦截器中,增加配置,通过interceptors.request记录每一个请求的cancelToken。且需要通过 window.axiosPromiseArr 将这些cancelToken在全局暴露出来。
image.png

2、全局的请求实例拦截器中,通过interceptors.response将"取消请求"的状态做一个特殊标记,方便后期统一静默处理。
image.png

3、通过vue路由守卫,在路由变更时(即 进入新页面的时候) 批量取消上一个页面的未完成请求。
执行 cancel方法,并清除记录的cancelToken。
image.png

(下面的步骤是非必须项)
4、修改自定义的全局请求拦截器,对"取消请求"做静默处理。
image.png

后续还可以在路由守卫中增加白名单,用于处理如keepAlive这种不需要取消请求的页面。

结束。

同步更新到自己的语雀
https://www.yuque.com/dirackeeko/blog/mmhzhdo9fic6pg3e


DiracKeeko
125 声望2 粉丝