使用axios取消请求 - 原生JavaScript

在处理数据请求时，有时数据量有限，过多的请求只会返回空数据。在这种情况下，直接中断请求是一个更高效的做法。虽然 Vue 和 Axios 的结合使用非常流行，但关于原生 JavaScript 实现的资料相对较少。因此，我决定分享一个使用 Axios 的 CancelToken 来取消请求的原生方法。

在发送请求之前，我们可以通过请求拦截器来检查是否需要取消请求。以下是一个示例代码：

// 添加请求拦截器
axios.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    console.log("加载中");
    document.getElementById("loding").style.display = "block";
    if (!frag) {
      config.cancelToken = new CancelToken(function executor(c) {
        cancel = c;
      });
      cancel("没有数据了");
    }
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

在接收到响应后，我们可以通过响应拦截器来判断是否还有数据。如果没有数据，我们可以设置一个标志位frag，以便在下一次请求时取消请求。

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    //console.log(response)
    if (response.data.message.length === 0){
        frag = false;
    }
    document.getElementById('loding').style.display = "none";
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

这样在数据加载完毕后能够有效地取消后续的请求，激活 frag，再到下次的请求拦截器中，直接取消拦截。

当数据刷完后，就会这样提示

(´இ 皿 இ ｀)如果还有更多的方法，欢迎分享啊