Ajax中的错误处理 - 优化你的编程体验

// 假设我们有一个函数用于处理Ajax请求和错误
function makeAjaxRequest(url, callback) {
    const request = new XMLHttpRequest();
    request.open('GET', url, true);
 
    request.onreadystatechange = function() {
        if (request.readyState === 4) { // 请求已完成
            if (request.status === 200) { // 成功状态码
                callback(null, request.responseText);
            } else { // 失败状态码
                // 创建一个错误对象并传递给回调函数
                const error = new Error(`HTTP Error: ${request.statusText}`);
                error.status = request.status;
                callback(error);
            }
        }
    };
 
    request.onerror = function() { // 网络错误处理
        // 创建一个错误对象并传递给回调函数
        const error = new Error('Network Error');
        callback(error);
    };
 
    request.send();
}
 
// 使用makeAjaxRequest函数发送请求
makeAjaxRequest('https://api.example.com/data', function(error, response) {
    if (error) {
        console.error('Error:', error.message);
        if (error.status) {
            console.error('Status Code:', error.status);
        }
    } else {
        console.log('Response:', response);
    }
});

这个示例代码展示了如何在Ajax请求中处理错误。它定义了一个makeAjaxRequest函数，该函数接受一个URL和一个回调函数作为参数。在回调函数中，它处理了HTTP成功和错误状态，并且对网络错误进行了处理。这种错误处理机制有助于提高用户体验，因为它能够让开发者在控制台中清晰地了解到错误信息，并且可以根据需要对错误进行处理或者重新发起请求。