前端开发设置请求超时时间的常见方法

在前端开发中，设置请求超时时间（timeout）是一个常见的需求，特别是在处理网络请求时，为了避免请求长时间挂起，影响用户体验。以下是几种常见的方式来设置请求超时时间：

1. 使用 XMLHttpRequest

XMLHttpRequest 是传统的 AJAX 请求方式，可以通过设置 timeout 属性来指定超时时间。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.timeout = 5000; // 设置超时时间为 5000 毫秒（5 秒）

xhr.onload = function() {
    if (xhr.status === 200) {
        console.log('请求成功:', xhr.responseText);
    } else {
        console.error('请求失败:', xhr.statusText);
    }
};

xhr.ontimeout = function() {
    console.error('请求超时');
};

xhr.send();

2. 使用 fetch API

fetch API 是现代浏览器提供的用于发起网络请求的接口。虽然 fetch 本身没有直接的 timeout 参数，但可以通过 AbortController 来实现超时控制。

const controller = new AbortController();
const signal = controller.signal;

const timeout = 5000; // 设置超时时间为 5000 毫秒（5 秒）

setTimeout(() => controller.abort(), timeout);

fetch('https://api.example.com/data', { signal })
    .then(response => {
        if (!response.ok) {
            throw new Error('网络响应不正常');
        }
        return response.json();
    })
    .then(data => console.log('请求成功:', data))
    .catch(error => {
        if (error.name === 'AbortError') {
            console.error('请求超时');
        } else {
            console.error('请求失败:', error);
        }
    });

3. 使用 axios

axios 是一个流行的基于 Promise 的 HTTP 客户端，它内置了对超时的支持。

axios.get('https://api.example.com/data', {
    timeout: 5000 // 设置超时时间为 5000 毫秒（5 秒）
})
.then(response => {
    console.log('请求成功:', response.data);
})
.catch(error => {
    if (error.code === 'ECONNABORTED') {
        console.error('请求超时');
    } else {
        console.error('请求失败:', error);
    }
});

4. 使用 jQuery.ajax

如果你在使用 jQuery，可以通过 timeout 选项来设置超时时间。

$.ajax({
    url: 'https://api.example.com/data',
    method: 'GET',
    timeout: 5000, // 设置超时时间为 5000 毫秒（5 秒）
    success: function(data) {
        console.log('请求成功:', data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        if (textStatus === 'timeout') {
            console.error('请求超时');
        } else {
            console.error('请求失败:', errorThrown);
        }
    }
});

总结

• XMLHttpRequest：直接设置 timeout 属性。
• fetch：结合 AbortController 实现超时控制。
• axios：内置 timeout 选项。
• jQuery.ajax：通过 timeout 选项设置超时。

根据你的项目需求和使用的技术栈，选择合适的方式来设置请求超时时间。