CancelToken与interceptors实现请求取消

anonymoussf 发布于2019-08-26 13:45 / 3410人阅读

摘要：二项目的实现方式取消请求取消前一个请求保存当前请求如果被拦截，则不处理业务逻辑区分请求返回的错误信息，如果是取消请求导致的，则一直处于状态，如果返回错误信息，则关闭显示未查到相关数据。

一、开发过程中，经常会碰到这样的业务场景：
多次触发查询按钮时，取消其他查询请求，只保留最后一个。如果涉及到图表展示的，逻辑会稍需要一些处理，比如点击查询，显示loading，请求回来后，有数据则展示数据，无数据或者返回错误信息则显示未查到相关数据。

二、vue项目的实现方式

取消请求

if (this.cancelRequest){
    this.cancelRequest()      //取消前一个请求
}
let CancelToken = axios.CancelToken    
this.$axios({
    method: "post",
    url: "/login/login",
    params: obj,
    cancelToken: new CancelToken((c)=>{
       this.cancelRequest = c    //保存当前请求
    })
}).then((res)=>{
    if(!res)return;       //如果res被拦截，则不处理
    //业务逻辑
}).catch((res)=>{
    this.loading = false
})

2、区分请求返回的错误信息，如果是取消请求导致的，则一直处于loading状态，如果返回错误信息，则关闭loading,显示未查到相关数据。
怎么区分错误信息呢，axios有一个方法isCalcel可以判断是不是由取消请求导致的错误信息。
代码如下：

axios.interceptors.reaponse.use((res)=>{
   //请求拦截的代码
},(err)=>{
    if(!axios.isCancel(err) {  //只拦截取消请求导致的错误信息
        return err             //这里如果没有return,响应回调函数里的res为undefined
    })
})

云服务器 GPU云服务器怎么取消服务器请求确定与取消 CancelToken Interceptors

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109466.html

axios入门实践

摘要：使用了拦截器处理相关问题，这样就不再需要使用来做错误的处理。万恶的拦截器一些处理无论是对成功的处理还是对失败的处理，如果拦截器不抛出错误，那么终将还会执行里面处理请求成功的函数，即使你返回。一前言本文适合刚接触axios或者使用过几次的同学来分享交流一些入门经验，本文同样适用熟悉axios的同学来作为参考手册。默认你已经看过axios的相关文档：axios文档 GitHub，通过...

kamushin233 2019-08-21 18:26 评论0 收藏0
Axios源码深度剖析 - AJAX新王者

摘要：我们先来看看构造函数构造函数就是用来实现拦截器的，这个构造函数原型上有个方法。关于源码，其实是比较简单的，都是用来操作该构造函数的实例属性的。存放拦截器方法，数组内每一项都是有两个属性的对象，两个属性分别对应成功和失败后执行的函数。 Axios源码分析 - XHR篇文章源码托管在github上，欢迎fork指正！ axios 是一个基于 Promise 的http请求库，可以用在浏览...

DangoSky 2019-08-22 17:34 评论0 收藏0
【Geek议题】合理的VueSPA架构讨论（下）

摘要：接上篇议题合理的架构讨论上传送门。处理思路如下使用上面定义的方法获取如果能获取到则说明有有效的，则时候即可跳转到目标页如果获取到空字符串，则说明无效或不存在，跳转至登录页面。接上篇《【Geek议题】合理的VueSPA架构讨论（上）》传送门。自动化维护登录状态登录状态标识符跟token类似，都是需要自动维护有效期，但也有些许不同，获取过程只在用户登录或注册的时候，不需要自动获取。 ...

mindwind 2019-08-22 15:54 评论0 收藏0