快捷導(dǎo)航

axios取消請(qǐng)求CancelToken的用法示例代碼

更新時(shí)間：2023年10月10日 08:57:51 作者：康師傅不會(huì)煮面

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

取消該請(qǐng)求之后的相同請(qǐng)求：

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

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

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

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

取消該請(qǐng)求之前的相同請(qǐng)求：

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

下面是一個(gè)實(shí)現(xiàn)取消前面的所有請(qǐng)求的例子：

import axios from 'axios';
 // 創(chuàng)建一個(gè)請(qǐng)求隊(duì)列
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);
    }
  }
}
 // 添加請(qǐng)求攔截器
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)建了一個(gè)請(qǐng)求隊(duì)列 pending ，然后為請(qǐng)求配置添加了一個(gè) cancelToken ，并將其推入請(qǐng)求隊(duì)列中。在發(fā)送新的請(qǐng)求之前，我們遍歷請(qǐng)求隊(duì)列，將之前的所有請(qǐng)求都取消掉，并從請(qǐng)求隊(duì)列中移除。同時(shí)，我們還需要在響應(yīng)攔截器中將已經(jīng)完成的請(qǐng)求從請(qǐng)求隊(duì)列中移除。

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

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

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

下面是一個(gè)重新創(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ù)接收一個(gè) cancel 函數(shù)作為參數(shù)
    cancel = c;
  })
};
// 添加請(qǐng)求攔截器
axios.interceptors.request.use(
  (config) => {
    // 如果 cancel 存在說明上次請(qǐng)求被取消了，重新創(chuàng)建一個(gè)
    if (typeof cancel === 'function') {
      config.cancelToken = new cancelToken(function executor(c) {
        cancel = c;
      });
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);
// 發(fā)送請(qǐng)求
axios(config)
  .then((response) => {
    console.log(response);
  })
  .catch((error) => {
    if (axios.isCancel(error)) {
      console.log('Request canceled', error.message);
    } else {
      console.log(error);
    }
  });
// 取消請(qǐng)求
cancel();

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

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

fetch請(qǐng)求才可以做到真正意義上的取消！?。?/p>