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

3,220 阅读1分钟

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();  //取消请求
}

axios的取消方法

axios是通过CancelToken.source方法去取消,代码如下

const CancelToken = axios.CancelToken();
const Source = CancelToken.source();
axios.get('http:aaa.com',{
    cancelToken: source.token
}).catch((thrown) => {
      if (axios.isCancel(thrown)) {
        console.log('Request canceled', thrown.message);
      } else {
        // handle error
      }
})

axios.post('http:aaa.com', {
  name: 'haha'
}, {
  cancelToken: source.token
})
source.cancel('Operation canceled by the user.');

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

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