vue - axios取消接口请求

axios

/*
  方式一：工厂方式创建
         CancelToken.source
*/
var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function(thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});
// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');


/*
  方式二：executor 函数
*/ 
var CancelToken = axios.CancelToken;
var cancel;
axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});
// 取消请求
cancel();

原生：abort()

<div>
    <button  id="get">请求</button>
    <button  id="cancel">取消</button>
</div>
<script>
    var currentAjax = null
    $('#get').click(function () {
        currentAjax = $.ajax({
            type: 'GET',
            url: 'http://...',
            success: function (res) {
                console.log(res)
            },
            error: function (err) {
                console.log("获取失败")
            }
        })
    })
    $('#cancel').click(function () {
        if (currentAjax) {
            currentAjax.abort()
        }
    })
</script>