如何取消xhr请求

setTimeout(() => {  xhr.abort()
}, 1000)

如何取消fetch请求

fetch()请求发送以后，如果中途想要取消，需要使用AbortController对象。

let controller = new AbortController();
let signal = controller.signal;fetch(url, {signal: controller.signal
});signal.addEventListener('abort',() => console.log('abort!')
);controller.abort(); // 取消console.log(signal.aborted); // true

如何取消axios请求

1.从 v0.22.0 开始，Axios 支持以 fetch API 方式—— AbortController 取消请求

const controller = new AbortController()axios.get('http://127.0.0.1:4523/mock/797249/goods/list?keyword=包包',{signal: controller.signal
}).then(function (response) { // 处理成功情况 console.log(response); 
}).catch(function (error) { // 处理错误情况 console.log(error); 
})// 取消请求 
controller.abort()

2.使用 cancel token 取消一个请求，此 API 从 v0.22.0 开始已被弃用

const CancelToken = axios.CancelToken
const source = CancelToken.source()axios.get('http://127.0.0.1:4523/mock/797249/goods/list?keyword=包包', { cancelToken: source.token 
}).catch(function (thrown) { if (axios.isCancel(thrown)) { console.log('Request canceled', thrown.message); } else { // 处理错误 } 
})source.cancel()