vue3 + axios interrupts and cancels the interface request

Foreword

In the recent development process, you always want to cancel the axios interface you are requesting. There are many application scenarios, for example:

1. The interface in the pop-up window requests to return a picture, which is used for front-end display. The interface does not return data. In this case, the pop-up window is closed, and the interface request needs to be interrupted.
2. The tab tab is rendered in turn according to the data returned from the back end. The label is frequently switched, and the interface request needs to be interrupted.
3. If the interface is requested in the for loop, the interface request needs to be interrupted when the interface jumps out of the loop.
4. Jump route, when leaving the page, you may also need to interrupt the interface request

Here are the solutions based on the above issues

Body

As of the publication of this article, the axios version number on the npm has been updated to v1.5.1. However, it is believed that the versions of some projects are still v0.x.x. Therefore, the following describes two cancellation methods. You can check the axios version numbers of your projects by yourself.

v0.22.0 CancelToken

1. Get Request

<el-button type="primary" @click="sendGet()">sendgetask</el-button>
<el-button type="danger" @click="cancel()">Cancel request</el-button>

import {ref,onMounted,onUnmounted} from 'vue'
import axios from "axios";

let source:any = null;
const sendGet = ()=>{
    //It can be understood that each interface is given an identity
  source = axios.CancelToken.source();
  axios.get('askurl',
      {
        cancelToken: source.token
      }
  ).then(res => {
    console.log("getask",res)
  }).catch(err => {
    if (axios.isCancel(err)) {
      console.log('Request cancellation', err);
    } else {
      console.log('Other errors', err)
    }
  });
}

const cancel = ()=>{
  source && source.cancel('Manual call source.cancelmethod，Manually cancel the request');
} 

2. Post Request

<el-button type="success" @click="sendPost()">sendpostask</el-button>
<el-button type="danger" @click="cancel()">Cancel request</el-button>

import {ref,onMounted,onUnmounted} from 'vue'
import axios from "axios";

let source:any = null;
const sendPost = ()=>{
  source = axios.CancelToken.source();
  axios.post("askurl",
       {},//Passing on parameters，If not, it must be added{}
       {
         cancelToken: source.token
       })
       .then((res) => {
         console.log("postask",res)
       }).catch(err => {
     if (axios.isCancel(err)) {
       console.log('Request cancellation', err);
     } else {
       console.log('Other errors', err)
     }
   })
}

const cancel = ()=>{
  source && source.cancel('Manual call source.cancelmethod，Manually cancel the request');
} 

v1.5.1 AbortController

Using fetch is a global method, its request is a Promise-based method – request method, and the default GET signal – is used to cancel fetch

<el-button type="primary" @click="sendNewGet()">sendgetask</el-button>
<el-button type="danger" @click="cancelController()">Cancel new version request</el-button>

import {ref,onMounted,onUnmounted} from 'vue'
import axios from "axios";

let controller:any = null;

const sendNewGet = ()=>{
 controller = new AbortController();   // Create a new oneAbortControllerExample
  fetch('askurl',
      {
        signal: controller.signal    // signalyesAbortControllerInstance properties
      }
  ).then(res => {
    console.log("new versiongetask",res)
    //Processing returned data
    res.json().then(res1 => {
      console.log(res1)
    })

  }).catch(err => {
    console.log(err)
  });
}

const cancelController = ()=>{
  controller && controller.abort();//transferabortmethod
} 

This document is transferred from https://blog.csdn.net/qq_37656005/article/details/133938807，If there is any infringement，Please contact to delete。