axios中断请求

使用中断请求原因: select根据当前值判断下拉框可选值 采用了接口的形式 1.首先会请求全部接口 然后table的状态项赋值显示 状态A点击后再次传参A发请求获取可选择的下拉值展示 关闭下拉框后再次请求全部下拉框值 状态change后立即发请求更新状态 连续点击状态值后会偶现一个问题 在状态A时展示了全部状态应该只展示对于A状态可选的值 所以用到了请求中断 在请求A状态可选值得方法里中断请求全部下拉的请求

axios内部提供axios.CancelToken.source().cancel()方法用于取消正在发送的请求，我们可以利用这个去处理

一 :封装请求的方法里:

import request from "../../utils/request"; // 暴露出来的axios实例
import axios from "axios"; // 源axios
const CancelToken = axios.CancelToken; // 取消请求

export function postAction(url, parameter,that) {
  return request({
    url: url,
    method:'post' ,
    data: parameter,
    cancelToken: that && new CancelToken(function executor(c){
      that.source = c // c是一个函数 被调用就会取消请求 （个人是这么理解的）
    })
  })
}

二:进行调用

1.vue中的data

  data() {
    return {
      ...(你的其它变量)
      source:null,
    }
  }

2.需要中断的请求中

    fetchData() {
      let data = this.data;
      let params = {
        pageNo: this.pageNo,
        rows: this.rows,
        key: this.inputVal,
        itemId: this.itemId,
        status: this.status,
      };

      let url = "transfer.do?waitTransferTaskPage";
      let that = this;
      postAction(url, qs.stringify(params),that).then((res) => { //多一个参数that
        ...(逻辑操作)
      });
    },

3.在methods中新建一个终止请求的方法,在需要中断的地方调用

methods: {
    ...(你的其它方法)
    //中止请求
    cancelRequest(){
      if(typeof this.source === "function") {
        this.source("终止请求")
      }
    }
  }

借用www.csdn.net/tags/Mtzakg…