Axios设置超时时间

在使用 Axios 库时，设置超时时间是一个重要的功能，它允许你指定一个请求在多长时间内如果没有响应则被视为超时。以下是关于如何在 Axios 中设置超时时间的详细教程：

设置超时时间的方法

全局设置

你可以通过配置 Axios 的默认选项来设置全局超时时间。这样，所有使用该 Axios 实例的请求都会应用这个超时时间。

const axios = require('axios'); // 或 import axios from 'axios';

// 设置默认超时时间为5秒（5000毫秒）
axios.defaults.timeout = 5000;

// 使用默认配置的axios实例发送请求
axios.get('https://example.com/api/resource')
    .then(response => {
        console.log('Response data:', response.data);
    })
    .catch(error => {
        if (error.code === 'ECONNABORTED') {
            console.log('请求超时');
        } else {
            console.error('Error:', error);
        }
    });

单个请求设置

你也可以为单个请求设置超时时间，而不影响其他请求。

const axios = require('axios'); // 或 import axios from 'axios';

axios.get('https://example.com/api/resource', {
    timeout: 10000 // 设置超时时间为10秒（10000毫秒）
})
.then(response => {
    console.log('Response data:', response.data);
})
.catch(error => {
    if (error.code === 'ECONNABORTED') {
        console.log('请求超时');
    } else {
        console.error('Error:', error);
    }
});

使用 Axios 实例设置

你还可以创建一个 Axios 实例，并在创建时设置超时时间。这样，你可以为特定的请求集配置不同的超时时间。

const axios = require('axios'); // 或 import axios from 'axios';

// 创建一个Axios实例，并设置超时时间为5秒（5000毫秒）
const instance = axios.create({
    timeout: 5000
});

// 使用创建的实例发送请求
instance.get('https://example.com/api/resource')
    .then(response => {
        console.log('Response data:', response.data);
    })
    .catch(error => {
        if (error.code === 'ECONNABORTED') {
            console.log('请求超时');
        } else {
            console.error('Error:', error);
        }
    });

超时时间的单位

Axios 的超时时间单位是毫秒。因此，在设置超时时间时，你需要将时间转换为毫秒。例如，5秒应设置为5000毫秒，10秒应设置为10000毫秒。

处理超时错误

当请求超时时，Axios 会抛出一个带有 code 属性为 'ECONNABORTED' 的错误。你可以在 catch 块中检查这个错误，并根据需要进行相应的处理，如重试请求、显示错误消息等。

注意事项

• 设置超时时间并不会自动取消请求。超时只是让 Axios 在达到指定时间后抛出一个错误，你需要手动处理这个错误。
• 在实际应用中，网络波动可能导致请求偶尔超时。因此，在处理超时错误时，最好采用重试策略，而不是直接失败。

通过以上方法，你可以灵活地设置 Axios 请求的超时时间，并根据需要处理超时错误。

本文地址：https://www.tides.cn/p_js-axios-set-timeout