博客 (2)

以下是使用定时器每秒钟请求服务器，并在后一个请求的响应比前一个请求的响应先到达客户端时抛弃前一个请求的响应的代码：

（以 $.post 为例，$.ajax 同理）

let previousXHR = null; // 存储前一个请求的 jqXHR 对象

function sendRequest() {
  // 取消前一个请求
  if (previousXHR) {
    previousXHR.abort();
  }

  // 发送新的请求
  const currentXHR = $.post(url, data, function(response) {
    // 请求成功的回调函数
    console.log(response);
  });

  // 更新前一个请求的 jqXHR 对象
  previousXHR = currentXHR;
}

// 每秒钟发送请求
setInterval(sendRequest, 1000);

如果你用 axios，请参此文。

一般我们使用原生 JS 的时候使用 abort() 来取消 fetch 请求。

在使用 axios 发送请求时，如果我们想要取消请求，可以使用 axios 提供的 CancelToken 和 cancel 方法。下面是具体的实现步骤：

// 创建 CacnelToken 实例
const cancelTokenSource = axios.CancelToken.source();
// GET 方式请求
axios.get(url, {
    cancelToken: cancelTokenSource.token
}).catch(thrown => {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    console.log('An error occurred', thrown);
  }
});
// POST 方式请求
axios.post(url, data, {
    cancelToken: cancelTokenSource.token
});
// 取消请求
cancelTokenSource.cancel('请求被取消');

get 请求的时候，cancelToken 是放在第二个参数里；post 的时候，cancelToken 是放在第三个参数里。axios-0.27.2 中测试成功。

在即时响应的搜索框中可以这样处理：（vue3）

let cancelTokenSource;
const app = Vue.createApp({
    methods: {
        fn_list: function () {
            // 如果已有请求则取消
            cancelTokenSource && cancelTokenSource.cancel();
            // 创建一个新的请求
            cancelTokenSource = axios.CancelToken.source();
            axios.post(url, data, {
                cancelToken: cancelTokenSource.token
            }).then(function (response) {
                // 请求成功
            }).catch(function (error) {
                // 请求失败/取消
            });
        },
    }
});
const vm = app.mount('#app');

如果你用 jQuery，请参此文。