AbortController中断取消原生fetch或axios

2023-07-19 本文已影响0人 keknei

有几个需求场景，需要中断或者取消请求，或者取消后再按照最新的参数去请求

例如新增一个任务，用户连续点击新增按钮，就会连续触发请求接口，所以需要去请求最后一个接口并中断所有以前的接口请求
例如在h5上，上面有很多参数，切换一个，就去请求接口，那么连续切换二次，就会连续触发请求接口，如果第一次请求返回结果是2s，最后一次是1s，那么第一次请求的结果就会覆盖最后一次的，显示是不准确的，，所以需要去请求最后一个接口并中断所有以前的接口请求
例如下载一个文件，视频音频什么的，需求有中断下载的功能

第一和第二个场景可以在用户请求前判断是否在请求中，来return false控制是否再次请求，但是第三个场景就不能了，就需要中断或者取消请求

以前用ajax的about来取消请求

  const xhr = XMLHttpRequest();
  xhr.open("get",url);
  xhr.send();
  // 取消请求
  xhr.abort();

由于现在都是基于promise的fetch或者axios，所以ajax就不用了，那么AbortController中断取消请求就顺势而出了

来看下用法
const controller = new AbortController();
controller有个属性signal和方法abort

controller.signal 需要设置在fetch请求中，这样我们就可以在外部终止这个请求了。相当于在fetch请求内部嵌入一个抓手，或者说预埋一个开关
controller.abort() 终止请求的方法，如果请求没有完成就可以终止

下面举个创建任务的请求例子,用的fetch请求
fetch(url,{signal: controller.signal})将signal传进去

let controller = null;
let loading = false;

function createTask() {
  // 如果正在请求中，就中断请求上一次的，然后去请求新的
  if (loading) {
    controller.abort();
  }
  // 构造新的AbortController对象
  controller = new AbortController();
  loading = true;
  fetch(url,{
    signal: controller.signal // 传入signal
  }).then(response=>{
    //第一次是连接服务器成功，然后去执行json方法，返回一个promise对象
    loading = false;
    return response.json();
  }).then(response=>{
    //请求服务器的结果
    console.log(response)
  }).catch(err=>{
    loading = false;
    console.log(err);
  });
}

下面用axios分别用get和post举个例子，来取消中断请求

axios get 取消创建任务请求

let controller = null;
let loading = false;

function createTask() {
  // 如果正在请求中，就中断请求上一次的，然后去请求新的
  if (loading) {
    controller.abort();
  }
  // 构造新的AbortController对象
  controller = new AbortController();
  loading = true;
  axios.get(url,{
    signal: controller.signal // 传入signal
  }).then(response=>{
    //请求成功
    loading = false;
    return response.json();
  }).catch(err=>{
    loading = false;
    console.log(err);
  });
}

axios post 取消创建任务请求

let controller = null;
let loading = false;

function createTask() {
  // 如果正在请求中，就中断请求上一次的，然后去请求新的
  if (loading) {
    controller.abort();
  }
  // 构造新的AbortController对象
  controller = new AbortController();
  loading = true;
  axios.post(url,{
    name: "张三",
    age: 18
  },{
    signal: controller.signal // 传入signal
  }).then(response=>{
    //请求成功
    loading = false;
    return response.json();
  }).catch(err=>{
    loading = false;
    console.log(err);
  });
}

AbortController中断取消原生fetch或axios

猜你喜欢

热点阅读