快捷導(dǎo)航

axios取消請求CancelToken的用法示例代碼

更新時間：2023年10月10日 08:57:51 作者：康師傅不會煮面

Axios提供了取消請求的功能,可以通過使用CancelToken來實現(xiàn),這篇文章主要給大家介紹了關(guān)于axios取消請求CancelToken的用法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

取消該請求之后的相同請求：

在使用 axios 發(fā)送請求時，如果在短時間內(nèi)連續(xù)發(fā)送同一個請求，可能會出現(xiàn)請求結(jié)果混亂或重復(fù)響應(yīng)的問題。為了避免這種情況，我們可以使用 axios 的取消請求功能，每次發(fā)送請求前先取消之前的請求。下面是使用 axios 取消請求的示例代碼：

import axios from 'axios';
 // 創(chuàng)建一個 CancelToken 對象
const source = axios.CancelToken.source();
 // 發(fā)送請求
axios.get('/api/data', {
  // 將 cancelToken 屬性設(shè)置為上面創(chuàng)建的 CancelToken 實例
  cancelToken: source.token
}).then(response => {
  console.log(response.data);
}).catch(error => {
  console.error(error);
});
 // 取消之前的請求
source.cancel('Duplicate request');

在上面的代碼中，我們先創(chuàng)建一個 CancelToken 對象 source ，并將其傳遞給發(fā)送請求的 cancelToken 屬性中。然后在需要取消之前請求的時候，調(diào)用 source.cancel() 方法即可。此時，后續(xù)的請求將不會被發(fā)送，以避免重復(fù)響應(yīng)。

需要注意的是，如果在請求被取消之前，請求已經(jīng)被發(fā)送并成功響應(yīng)，那么該已經(jīng)成功響應(yīng)的請求結(jié)果無法被取消，因此也需要對已經(jīng)成功響應(yīng)的請求結(jié)果做好處理。另外，也需要處理請求被取消的異常情況，以避免出現(xiàn)錯誤。

取消該請求之前的相同請求：

在 axios 中，取消上一次請求與取消前面的所有請求是有差別的。取消上一次請求，我們可以記錄當(dāng)前請求的 cancelToken ，然后在下一次請求之前發(fā)送一個取消請求的操作。而取消前面的所有請求，我們需要維護(hù)一份請求隊列，然后在新的請求發(fā)起之前，將之前的所有請求都取消掉。

下面是一個實現(xiàn)取消前面的所有請求的例子：

import axios from 'axios';
 // 創(chuàng)建一個請求隊列
let pending = [];
const CancelToken = axios.CancelToken;
const removePending = (config) => {
  for (let p in pending) {
    if (pending[p].url === config.url + '&' + config.method) {
      pending[p].cancel("request canceled");
      pending.splice(p, 1);
    }
  }
}
 // 添加請求攔截器
axios.interceptors.request.use(
  (config) => {
    removePending(config);
    config.cancelToken = new CancelToken((c) => {
      pending.push({ cancel: c, url: config.url + '&' + config.method });
    });
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
 // 響應(yīng)攔截器
axios.interceptors.response.use(
  (response) => {
    removePending(response.config);
    return response;
  },
  (error) => {
    return Promise.reject(error);
  }
);

在上面的代碼中，我們創(chuàng)建了一個請求隊列 pending ，然后為請求配置添加了一個 cancelToken ，并將其推入請求隊列中。在發(fā)送新的請求之前，我們遍歷請求隊列，將之前的所有請求都取消掉，并從請求隊列中移除。同時，我們還需要在響應(yīng)攔截器中將已經(jīng)完成的請求從請求隊列中移除。

需要注意的是，如果發(fā)送的請求是無法取消的，例如使用 jsonp 發(fā)送的請求，那么上面的代碼將無法取消這類請求。因此，我們需要根據(jù)實際情況選擇合適的方式來取消請求。

取消之后再次發(fā)送請求提示被cancel怎么辦？

如果在 axios 中取消了一個請求，那么再次發(fā)送同樣的請求會提示 Cancellation 已經(jīng)被取消的錯誤。這是因為 axios 同樣的請求已經(jīng)被 cancel ，因此無法再次發(fā)送。如果需要再次發(fā)送同樣的請求，需要重新創(chuàng)建一個新的 cancelToken ，否則會一直提示被取消。

下面是一個重新創(chuàng)建 cancelToken 的示例代碼：

import axios from 'axios';
let cancelToken = axios.CancelToken;
let cancel;
let config = {
  method: 'get',
  url: '/api/data',
  cancelToken: new cancelToken(function executor(c) {
    // executor 函數(shù)接收一個 cancel 函數(shù)作為參數(shù)
    cancel = c;
  })
};
// 添加請求攔截器
axios.interceptors.request.use(
  (config) => {
    // 如果 cancel 存在說明上次請求被取消了，重新創(chuàng)建一個
    if (typeof cancel === 'function') {
      config.cancelToken = new cancelToken(function executor(c) {
        cancel = c;
      });
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
// 發(fā)送請求
axios(config)
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    if (axios.isCancel(error)) {
      console.log('Request canceled', error.message);
    } else {
      console.log(error);
    }
  });
// 取消請求
cancel();

在上面的代碼中，我們在發(fā)送請求前先創(chuàng)建了一個 cancelToken ，并將 cancel 函數(shù)保存下來。當(dāng)發(fā)送請求時，我們檢查 cancel 函數(shù)是否存在，如果存在說明上次請求被取消了，那么我們需要重新創(chuàng)建一個 cancelToken 并將其傳遞給新的請求中。這樣就可以在取消請求后重新發(fā)送同樣的請求了。

由于axios是對XHR對象的封裝，如果請求已經(jīng)被發(fā)送并且服務(wù)器已經(jīng)接收到請求，那么cancelToken 在調(diào)用 abort() 方法取消請求可能會導(dǎo)致一部分?jǐn)?shù)據(jù)已經(jīng)被傳輸。因此，使用時需要謹(jǐn)慎。

fetch請求才可以做到真正意義上的取消！！！