前端在api请求的时候,有时候可能会遇到发送多个请求的时候,但是实际有效的是最后一次,但是后端响应的值不一定是你最后一次发送的请求,有可能最后一次比之前的还要更快响应,这就导致用户切换到a数据,前端显示是b数据。

解决这个情况有很多种方式,比如改动api请求方式,或者请求如果重复同一个接口,取消前面的请求,发起新的请求。

这里我们是后者。

使用方式

官方提供了两个例子,第一个例子照着写怎么都没用,第二个没看懂他的参数到底是data的还是谁的,最终还是百度了好多文章,才渐渐明白。

首先,我的项目使用的axios是二次封装的,也就是通过axios.create()方法预设了baseURL和拦截器的,最终再导出,就是axios.create()创建的实例。其他axios方式我就没空测了,可以看完本教程,在自行根据代码调整。

那么这个封装和导出,简单来说可以这么看:

request.js

import axios from "axios";

let api = axios.create({
  ...
});

export default api;

然后我的实际api请求是这样的

api-xxx.js

import api from "@/utils/request";

export const apiData = (data) => {
  return api({
    url: '/xxx/xx/xxx',
    method: 'post',
    data
  });
};

我们现在就要对着api的请求进行调整,添加一个cancelToken参数,这个参数必须要引用axios对象来创建。

增加cancelToken参数

api-xxx.js

import api from "@/utils/request";
import axios from 'axios'

export const apiData = (data,that) => {
  return api({
    url: '/xxx/xx/xxx',
    method: 'post',
    data,
    cancelToken: new axios.CancelToken(function executor(c) { // 设置 cancel token
      that.cancel = c;
    })
  });
};

我们给apiData增加了一个that参数,这个参数用于获取到api所使用的vue文件的上下文对象,我们给他的上下文对象cancel设置了一个方法c,c就是用于取消本次请求的方法。

vue中使用

<template>
  ...
</template>
<script>
import { apiData } from "@/api/api-xxx";
export default {
  data(){
    return {
      cancel: null, //取消请求
    }
  },
  methods:{
    //请求
    getApiData(){
      //判断取消方式是否存在,存在说明在这之前已经发请了请求
      if(typeof this.cancel === "function") {
        this.cancel("取消本次请求");
      };
      //发起请求
      apiData({key:value},this).then(res=>{
        ...
      }).catch(err=>{
        ...
      })
    }
  }
}  
</script>

这样就行了,每次发请求都都会先判断上一次是否有请求,有的话取消,但是上一次请求可能会很早就发出的,再取消也无所谓,所以不用再判断间隔啥的。

this.cancel("取消本次请求")中的参数,可传可不传,就是一个文字mssage而已,无妨。

错误处理

取消请求,其实走的是promise的错误处理,也就是说,取消本次请求后,会触发api的interceptors.response拦截器的错误处理,也就是如下代码所示:

import axios from "axios";

let api = axios.create({
  ...
});

api.interceptors.response.use(response => {},error=>{
  //触发这个错误处理
})


export default api;

其中error并不是一个真正意义上的Error对象,他是一个axios生成的一个对象,本身也不是有code值这些,他的对象如下:

Cancel {message: undefined}

如果我们在this.cancel方法中传入一个值,那么undefined就是这个值了。

但是取消的请求我们并不需要进行错误提示,因为他并不是一个真正的错误,好在axios官方提供了一个判断方法

import axios from "axios";

let api = axios.create({
  ...
});

api.interceptors.response.use(response => {},error=>{
  //触发这个错误处理
  if(!axios.isCancel(error)){
    ...统一的错误通知
  };
  return Promise.reject(error);
})


export default api;

本身是一个promise,所以我们忽略在取消请求时的统一错误通知方法,但是还是要抛出一个错误给vue文件中apiData请求的catch。

这里其实有两个路子:

  1. 原封不动的返回error对象
  2. 自己封装一个对象用于判断

我选的第一条,简单点。

一般来说,我们在安装完axios会在main.js中将axios注册在vue的原型链上。

main.js

import Vue from "vue";
//axios
import axios from "axios";
Vue.prototype.$axios = axios;

所以我们在apiData请求的catch中可以这么写

<template>
  ...
</template>
<script>
import { apiData } from "@/api/api-xxx";
export default {
  data(){
    return {
      cancel: null, //取消请求
    }
  },
  methods:{
    //请求
    getApiData(){
      //判断取消方式是否存在,存在说明在这之前已经发请了请求
      if(typeof this.cancel === "function") {
        this.cancel("取消本次请求");
      };
      //发起请求
      apiData({key:value},this).then(res=>{
        ...
      }).catch(err=>{
        if (this.$axios.isCancel(err)) return;
        ...省略自己的错误处理方法
      })
    }
  }
}  
</script>

直接在catch中判断一下,是取消就return跳过就行了。

效果图

取消错误的补充

axios的请求取消后,会触发到error回调,对于这个回调的error参数对象,axios本身提供了一个isCancel()的方法判断。

一般来说我们都会在这个error回调里面抛出一个Promise.reject();

api.interceptors.response.use(response => {},error=>{
  return Promise.reject(error);
})

但是这也会产生一个问题,就是如果发起api请求的那边,没有使用catch捕获这个错误,那么promise会将这个错误直接全局抛出,也就是说会在浏览器的cosole那报错,但是并不影响代码运行。

在实际api请求那边,catch并不一定要做处理,可以是一个空的回调函数,也没必要在那边判断是否为取消。

上面我的说明有些偏面,但是也是一种思路,常用的话可能是这样:

//发起请求
      apiData({key:value},this).then(res=>{
        ...
      }).catch(()=>{
        //不处理或者做其他的
      })

我们也没必要每个请求的catch都去判断是否为取消的请求,其实没啥必要,只要不要写一些复杂的需求,为了不让他全局抛出错误,我们可以直接如上所示,写一个空的回调即可。

当然axios的issues中有提供了一个防止全局抛出错误的处理方式,但是呢,答者本人并不推荐,代码如下:

instance.interceptors.response.use((response) => {
  if (someCondition(response) {
    return new Promise(() => {});
  }
  return response;
});

他的原理就是,如果是一个取消请求的报错,那么就返回一个永远不会有结果的Promise,于是请求的then和catch都不会被触发,全局的报错就不会存在了。

但是,也会有一个问题,就是内存泄漏,当promise创建后,他就一直在pengding状态,一直在内存中常驻等待返回内容处理。

所以,如果是一个永远不会有结果的promise会让内存中常驻一个用不到的内容。但是又无法清除。

所以,对于取消产生的错误处理方式其实就两种:

  1. 每个请求都带catch捕获 (推荐使用的)
  2. 返回一个不会有结果的Promise (会造成内存泄漏)

以上就是关于axios取消请求以及取消后错误处理的方式思路。

分类: vue 项目实战 标签: vueaxios拦截器取消axios取消请求错误处理

评论

全部评论 7

  1. 马呆呆
    马呆呆
    Google Chrome Windows 10
    点赞有bug 可以无限点
    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @马呆呆是的,因为不太会php( ´_ゝ`)
  2. 请教问题
    请教问题
    Google Chrome MacOS

    请教的问题,如果用第二种方式,我改下写法比如

    instance.interceptors.response.use((response) => {
    if (someCondition(response) {
    let promiseObj = new Promise(() => {});

    setTimeout(() => { promiseObj = null }, 0);

    return promiseObj;
    }
    return response;
    });

    这样可以清除掉内存中创建的promise 对象吗?

    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @请教问题你清除的是你的promiseObj ,跟axios的promise有啥关系,不同的东西了
      1. 请教问题
        请教问题
        Google Chrome MacOS
        @木灵鱼儿确实,是我理解错误了。
  3. 如果有了可惜
    如果有了可惜
    Google Chrome Windows 10

    好家伙我以为是在看掘金
    有用不错,但是传入 this 的方式。。

    1. 木灵鱼儿
      木灵鱼儿
      FireFox Windows 10
      @如果有了可惜其实也用不着这样了,正确做法是封装axios时增加重复请求取消的操作

目录