如何终止前端发起的请求？

问题描述：

就是前端发起请求后，后端还未全部返回请求数据时，终止请求，不再返回数据。

问题案例：

【附件上传】：前端上传一个1G大小的压缩文件时，耗时大概一两分钟，在上传到50%的时候，用户要取消上传，此时，就要执行如题所探讨的终止请求动作。

解决思路：

由于目前前后端交互使用的技术有fetch/ajax/axios,那么基本思路就是基于各自提供的接口，实现请求终止动作。

【fetch】终止前端发起的请求

解决方案：使用AbortController 构造器，代码图如下：

var controller = new AbortController();
var signal = controller.signal;

var downloadBtn = document.querySelector('.download');
var abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function() {
  controller.abort();
  console.log('Download aborted');
});

function fetchVideo() {
  ...
  fetch(url, {signal}).then(function(response) {
    ...
  }).catch(function(e) {
    reports.textContent = 'Download error: ' + e.message;
  })
}

使用说明：a.该构造器对360浏览器不兼容，使用要考虑浏览器(待普及)

【 axios】终止前端发起的请求

解决方案：利用axios请求的config参数，向axios添加一个包含cancelToken的config配置对象。
方法一代码如下：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');

方法二代码如下：

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // An executor function receives a cancel function as a parameter
    cancel = c;
  })
});

// cancel the request
cancel();

使用说明：a.方法一可能会终止所有的axios请求(也就是说，使用

source.cancel('Operation canceled by the user.');

后，后续的所有axios都会被终止(须自行验证))
b.使用方法二，多个用到终止请求的请求方法，可以公用一个相对全局的cancel变量，在每个请求方法有cancel=c,可以实现重置cancel。