异步发送的请求---取消操作

本人在项目中使用到axios和ajax两种发送异步请求的方式：

下面先谈谈使用axios发送异步请求的取消操作：

使用 cancel token 取消请求

Axios 的 cancel token API 基于cancelable promises proposal，它还处于第一阶段。

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

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 函数到 CancelToken 的构造函数来创建 cancel token：

var CancelToken = axios.CancelToken;
var cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// 取消请求
cancel();

 

Note : 可以使用同一个 cancel token 取消多个请求

 

接着谈一下使用ajax取消异步请求的使用：

普通的ajax很少会涉及到需要取消请求的操作，但是在定时（setInterval）发送异步请求的时候，取消ajax就变得额外重要，废话不多说，直接上代码

$(document).ready(
    var xhr;
    var fn = function () {
        if (xhr && xhr.readyState != 4) {
            xhr.abort();
        }
        xhr = $.ajax({
            url: 'ajax/progress.ftl',
            success: function (data) {
                //do something
            }
        });
    };

    var interval = setInterval(fn, 500);
);

 

总结：上面两种取消请求的方式并不是每次请求都需要考虑到，只是到遇到问题的时候多一种解决思路而已

  推荐文章： JS 打开新窗口