詳解axios超時的種種問題

一、axios超時沒效果

在網路請求中，經常會遇到請求超時這個問題。axios默認的超時時間為0，也就意味著請求沒有超時限制。但是在實際場景中，如果請求一直沒有響應，我們需要控制超時時間，以保證請求時間的合理性。然而，有時候我們會在代碼中設置timeout，但是請求卻沒有在規定的時間內超時，這是為什麼呢？

這種情況一般是因為後端沒有返迴響應，因此axios不能識別這個請求是否超時，因此我們需要使用cancelToken來取消請求，以避免此類問題的出現。

axios.get('/api', {
    cancelToken: new CancelToken(function (cancel) {
        setTimeout(() => {
            cancel('Timeout');
        }, 1000);
    })
}).then(response => {
    console.log(response);
}).catch(e => {
    console.log(e.message);
});

二、axios超時時間默認值

axios默認的超時時間為0，即沒有超時限制。如果我們需要設置超時時間，可以在請求配置中進行設置。超時時間可以是一個數字或者是一個對象。如果是數字，則表示超時時間的毫秒數。如果是對象，則可以分別設置請求超時時間、連接超時時間、響應超時時間。

axios.get('/api', { timeout: 5000 });
// 或者
axios.get('/api', {
    timeout: {
        request: 5000, // 請求超時時間
        connect: 5000, // 連接超時時間
        response: 5000, // 響應超時時間
    }
});

三、axios超時重試機制

在網路請求中，如果請求無響應或者響應較慢，我們可以使用axios的重試機制重新發送請求。我們可以設置重試次數和重試間隔，來控制網路請求的穩定性。

axios.get('/api', {
    timeout: 1000,
    retry: 3, // 重試次數
    retryDelay: 1000, // 重試間隔
}).then(response => {
    console.log(response);
}).catch(e => {
    console.log(e.message);
});

四、axios超時後做什麼工作

當axios超時後，我們可以採取多種處理方式。比如，可以重新發送請求，或者顯示錯誤信息。下面是一個示例：

axios.interceptors.response.use((response) => {
    return response;
}, (error) => {
    const { config, response } = error;
    if (response.status === 504) {
        const retry = config.retry || 0;
        const retryDelay = config.retryDelay || 1000;
        if (retry > 0) {
            return new Promise((resolve) => {
                setTimeout(() => {
                    console.log(`Retry: ${config.url}`);
                    config.retry--;
                    resolve(axios(config));
                }, retryDelay);
            });
        }
    }
    return Promise.reject(error);
});

在這個示例中，如果請求超時（狀態碼為504），則會根據重試次數和重試間隔重新發送請求。如果重試次數為0，則會直接顯示請求錯誤信息。

五、總結

在網路請求中，我們經常會遇到請求超時的問題。針對這個問題，axios提供了多種解決方案，包括使用cancelToken取消請求、設置超時時間、使用重試機制等等。希望本文可以幫助大家更好地理解axios超時的相關問題。