前端怎么去取消一个http请求

标签：function axios http 请求 前端 source cancel CancelToken

问题描述：

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

问题案例：

【附件上传】：前端上传一个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。

那axios的CancelToken.source是怎么取消请求的；

实际上axios是对XMLHtpRequest的封装，axios取消请求也是运用的XMLHttpRequest.abort()来取消的.

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

XMLHttpRequest

普通的ajax请求我们通过XMLHttpRequest.abort()方法去取消已经发出的请求， 当一个请求被终止的时候，它的readyState将被置为：XMLHttpRequest.UNSENT(0)， 并且请求的status为0。

下面我们看看一个http请求怎么被取消的

let xhr = new XMLHTTPRequest(),
method = 'GET',
url = "http:aaa.com"
xhr.open( method,url,true );
xhr.send();
if(OH_NOES_WE_NEED_TO_CANCEL_RIGHT_NOW_OR_ELSE){
    xhr.abort();  //取消请求
}

 

标签：function,axios,http,请求,前端,source,cancel,CancelToken
From： https://www.cnblogs.com/Ryan-DHQ/p/17088716.html