Ajax学习:Ajax请求超时控制与网络异常处理

// 创建一个Ajax请求工具函数，支持超时和网络异常处理
function makeAjaxRequest(url, options) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        const timeout = options.timeout || 10000; // 设置默认超时时间为10秒
 
        xhr.open(options.method || 'GET', url, true);
 
        // 设置请求超时处理
        xhr.timeout = timeout;
        xhr.ontimeout = () => reject(new Error('请求超时'));
 
        // 设置网络异常处理
        xhr.onerror = () => reject(new Error('网络异常'));
 
        // 设置请求完成处理
        xhr.onload = () => {
            if (xhr.status === 200) {
                resolve(xhr.responseText);
            } else {
                reject(new Error('请求失败，状态码：' + xhr.status));
            }
        };
 
        // 设置请求头部
        if (options.headers) {
            Object.keys(options.headers).forEach(key => {
                xhr.setRequestHeader(key, options.headers[key]);
            });
        }
 
        // 发送请求
        xhr.send(options.data || null);
    });
}
 
// 使用示例
makeAjaxRequest('https://api.example.com/data', {
    method: 'GET',
    headers: { 'Content-Type': 'application/json' }
}).then(response => {
    console.log('请求成功：', response);
}).catch(error => {
    console.error('请求异常：', error.message);
});

这段代码定义了一个makeAjaxRequest函数，它接收一个URL和一个包含请求选项的对象。函数返回一个Promise对象，允许通过.then()和.catch()处理请求的成功和异常情况。代码中包含了对请求超时和网络异常的处理，并且可以通过传入的options设置请求方法、头部和数据。