快捷導(dǎo)航

vue的axios取消請(qǐng)求實(shí)現(xiàn)過程

更新時(shí)間：2025年12月04日 08:34:40 作者：羅森林

文章介紹了如何使用axios的cancelToken功能取消請(qǐng)求,包括兩種創(chuàng)建cancelToken的方法：使用CancelToken.source工廠方法和通過傳遞executor函數(shù)創(chuàng)建,還提到了如何處理取消請(qǐng)求的原因,并給出了解決頻繁點(diǎn)擊發(fā)送請(qǐng)求問題的建議

axios取消請(qǐng)求

axios發(fā)送請(qǐng)求時(shí)，添加cancelToken配置項(xiàng)可以用于取消請(qǐng)求，cancelToken的取值有兩種方式

1.使用 CancelToken.source 工廠方法創(chuàng)建cancel token

CancelToken有一個(gè)source靜態(tài)方法，調(diào)用之后返回一個(gè)對(duì)象，該對(duì)象包含一個(gè)token屬性用于標(biāo)記請(qǐng)求和一個(gè)cancel方法用于取消請(qǐng)求

    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();
     axios.get('http://localhost:6003/axios/4',{
        cancelToken: source.token
      }).then(function(res) {
            console.log(res.data);
          })
    source.cancel('不想請(qǐng)求了');

2.通過傳遞一個(gè) executor 函數(shù)到 CancelToken 的構(gòu)造函數(shù)創(chuàng)建cancel token

axios有一個(gè)CancelToken屬性，他是一個(gè)類，用于獲取取消請(qǐng)求的cancel方法，獲取了該方法之后就可以在合適的地方執(zhí)行cancel()取消請(qǐng)求了。

這種方式比較麻煩，但是可以用于取消多個(gè)請(qǐng)求，你可以將c這個(gè)取消請(qǐng)求的方法push進(jìn)一個(gè)數(shù)組，然后在你需要取消多個(gè)請(qǐng)求的時(shí)候，循環(huán)這個(gè)數(shù)組，依次執(zhí)行里面的方法即可取消多個(gè)請(qǐng)求。

    let arr = [];
    const CancelToken = axios.CancelToken;
     axios.get('http://localhost:6003/axios/4',{
        cancelToken: new CancelToken(function executor(c){
            arr.push(c);
            //cancel = c;
        })
      }).then(function(res) {
            console.log(res.data);
          })
      axios.get('http://localhost:3000/axios/3',{
        cancelToken: new CancelToken(function executor(c){
            arr.push(c);
            //cancel = c;
        })
      }).then(function(res) {
            console.log(res.data);
          })
      for (let i = 0; i < arr.length; i++) {
        arr[i]('請(qǐng)求取消');
      }

注意點(diǎn)1：

cancel取消請(qǐng)求方法在調(diào)用取消請(qǐng)求的時(shí)候可以將取消原因——message字符串傳遞進(jìn)去，這樣請(qǐng)求在被取消之后會(huì)被catch捕獲，你可以在這里將取消原因打印出來或者提示給用戶，比如提示用戶不要頻繁點(diǎn)擊發(fā)送請(qǐng)求

    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();
     axios.get('http://localhost:6003/axios/4',{
        cancelToken: source.token
      }).then(function(res) {
            console.log(res.data);
          }).catch(function(err) {
            if (axios.isCancel(err)) {
              console.log(err.message);
            }
          })
      source.cancel('不想請(qǐng)求了');

注意點(diǎn)2：

get的cancelToken放置在第二個(gè)參數(shù)的對(duì)象里面，post的cancelToken放置在第三個(gè)參數(shù)對(duì)象里面

    const CancelToken = axios.CancelToken;
    const source = CancelToken.source();
    axios.post('http://localhost:6003/axios',{
                username: 'lisi',
                content: 123
            },{
                headers:{
                    "Content-Type": "application/json"
                 },
                 cancelToken: source.token
               }

               ).then(function(ret){
                console.log(ret.data);
            })
      source.cancel('不想請(qǐng)求了');