如何取消xhr / fetch / axios请求

如何取消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()