fetch中option参数可以接受一个Abortsignal,只要传入的signal执行了abort()方法,fetch请求就会被立即终止,所以我们可以利用这个参数配合超时定时器实现请求超时功能
MDN(Abortsignal): https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal
MDN(fetch): https://developer.mozilla.org/en-US/docs/Web/API/RequestInit#signal
function fetchWithTimeout(url = '', options = {}, timeout = 10000) {
const controller = new AbortController()
const tid = setTimeout(() => controller.abort(), timeout);
return fetch(url, {
...options,
signal: controller.signal
})
.then(response => {
// 处理响应
return response
})
.catch(err => {
if (err.name === 'AbortError') {
console.error('请求超时')
} else {
console.error('请求失败', err)
}
throw err
}).finally(() => {
clearTimeout(tid)
})
}