LOADING

MiniKano的小窝


 

JavaScript中如何为fetch方法添加请求超时功能

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)
        })
}
点赞

发表回复

电子邮件地址不会被公开。必填项已用 * 标注