
let xhr = new XMLHttpRequest(),
    method = "GET",
    url = "https://developer.mozilla.org/"; // 仅为示例，并非真实接口地址。
xhr.open(method,url,true);
 
xhr.send();
 
xhr.abort(); // 终止请求

2，【Ajax】ajax.abort();

示例：


let queryTruckAjax;
if(queryTruckAjax){
    queryTruckAjax.abort(); // 终止请求
}
queryTruckAjax =  $.ajax({
    type: "POST",
    url:url,
    dataType: "json",
    success: function(data) {
        do thing...
    },error: function () {
    }
});

3，【axios】axios.CancelToken;

Axios 提供了一个 CancelToken的函数，这是一个构造函数，该函数的作用就是用来取消接口请求的。利用axios请求的config参数，向axios添加一个包含cancelToken的config配置对象。示例：

可以使用 CancelToken.source 工厂方法创建 cancel token，像这样：


<body>
<div class="page" id="app">
  <button @click="getMsgFirst" class="get-msg">获取数据1</button>
  <button @click="getMsgSecond" class="get-msg">获取数据2</button>
  <button @click="cancelGetMsg" class="cancel">取消获取</button>
</div>
<script>
  import axios from 'axios'
  var app = new Vue({
    el: '#app',
    data: {
      cancelToken: null, // 这里要先初始化
      source: null, // 这里要先初始化
    },
    created() {
      this.cancelToken = axios.CancelToken;
      this.source = this.cancelToken?.source();
    },
    methods: {
      getMsgFirst () {
        axios.get('/user/12345', {
          cancelToken: this.source?.token
        }).catch(function(thrown) {
          if (axios.isCancel(thrown)) {
            console.log('Request canceled', thrown.message);
          } else {
            // 处理错误
          }
        });
      },
 
      getMsgSecond () {
        axios.get('/user/12345', {
          cancelToken: this.source?.token
        }).catch(function(thrown) {
          if (axios.isCancel(thrown)) {
            console.log('Request canceled', thrown.message);
          } else {
            // 处理错误
          }
        });
      },
 
      cancelGetMsg () {
        // 取消请求（message 参数是可选的）
        this.source.cancel('Operation canceled by the user.');
      }
    }
  })
</script>
</body>

还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token：


<body>
  <div class="page" id="app">
    <button @click="getMsg" class="get-msg">获取数据</button>
    <button @click="cancelGetMsg" class="cancel">取消获取</button>
    <ul>
      <li v-for="item in items">{{item.name}}</li>
    </ul>
  </div>
  <script>
  import axios from 'axios'
  var app = new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!',
      items: [],
      cancel: null // 这里要先初始化
    },
    methods: {
      getMsg () {
        let CancelToken = axios.CancelToken
        let self = this
        // 仅为示例，并非真实接口地址。
        axios.get('http://jsonplaceholder.typicode.com/comments', {
          cancelToken: new CancelToken(c => {
            this.cancel = c
            console.log(c)
            // 这个参数 c 就是CancelToken构造函数里面自带的取消请求的函数，这里把该函数当参数用
          })
        }).then(res => {
          this.items = res.data
        }).catch(err => {
          console.log(err)
        })
      },
 
      cancelGetMsg () {
        this.cancel() // 终止请求
      }
    }
  })
  </script>
</body>

实例化后的 axios 访问不到 CancelToken，但是你可以这样做：


import { Axios } from '@/common'
import axios from 'axios'
export let cancelAnalysisTask = null
 
// 解析excel
export const analysis = (option = {}) => Axios.post('/get/list', option, {
  cancelToken: new axios.CancelToken(c => { // 这里的CancelToken原生的axios上的
    cancelAnalysisTask = c
  })
})

4，【微信小程序】RequestTask.abort()；

示例：


if (requestTask) {
    requestTask.abort(); // 终止请求
}
let requestTask = wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)
  }
})

5，【uni-app】 requestTask.abort();

如果希望返回一个 requestTask 对象，需要至少传入 success / fail / complete 参数中的一个，如果没有传入 success / fail / complete 参数，则会返回封装后的 Promise 对象。示例：


const requestTask = uni.request({
    url: 'https://www.example.com/request', // 仅为示例，并非真实接口地址。
    data: {
        name: 'name',
        age: 18
    },
    success: function(res) {
        console.log(res.data);
    }
});
 
 // 终止请求
requestTask.abort();

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小丑西瓜9/article/detail/66665

如何终止前端发起的请求？_requesttask.abort()

问题描述：

问题案例：

问题解决：

1，【原生JS】XMLHttpRequest.abort();

2，【Ajax】ajax.abort();

3，【axios】axios.CancelToken;

4，【微信小程序 】RequestTask.abort()；

5，【uni-app】 requestTask.abort();

4，【微信小程序】RequestTask.abort()；