異步發送的請求---取消操作

本人在項目中使用到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 打開新窗口