详解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超时的相关问题。