axios中文文档
请求文件中

//构造函数来创建 cancel token
import request from '@/utils/request'
import axios from 'axios'
const CancelToken = axios.CancelToken;
export function fetchList(query,that) {
  return request({
    url: '/vue-element-admin/article/list',
    method: 'get',
    params: query,
    cancelToken: new CancelToken(function executor(c) {
      // executor 函数接收一个 cancel 函数作为参数
      that.cancel = c;
    })
  })
}
//console.log(qs.stringify({
  //name:'hana',
  //age:'18'
//}))
// logs name=hana&age=18

实际引用

  created() {
    this.getList();
    setTimeout(() => {
      this.cancel("取消了请求");
    });
  },
  methods: {
    getList() {
      this.listLoading = true;
      fetchList(this.listQuery, this)
        .then(response => {
          this.list = response.data.items;
          this.total = response.data.total;
          // Just to simulate the time of the request
          this.listLoading = false;
        })
        .catch(err => {
          console.log(err);
        });
    }
 }

效果

也可以参考混入到全局中取消请求

const controller = new AbortController();

    <div id="app">
        <button @click="cancelReq">取消请求</button>
        <button @click="handel">请求1</button>
        <button @click="handel2">请求2</button>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.min.js"></script>

    <script>
        axios.defaults.baseURL = 'http://localhost:3000'
        new Vue({
            el: '#app',
            data() {
                return {
                    clist: [], // 页面展示数据
                    abort: null
                }
            },
            mounted() {},
            methods: {
                handel() {
                    let {
                        abort,
                        ready
                    } = this.request()
                    this.abort()
                    ready()
                    this.abort = abort
                },
                cancelReq() {
                    this.abort()
                },
                handel2() {
                    let {
                        abort,
                        ready
                    } = this.request()
                    this.abort = abort
                    ready()
                },
                request() {
                    const controller = new AbortController();
                    const signal = controller.signal;
                    return {
                        abort: () => controller.abort(),
                        ready: () => this.abortableFetch({
                            signal
                        })
                    }
                },
                abortableFetch(options) {
                    axios({
                        method: 'get',
                        url: '/test',
                        ...options
                    }).then(res => {
                        console.log(res);
                    }).catch(error => {
                        console.log(error, "error");
                    })
                },
            },
        })
    </script>