请求发起阶段
- 在创建和配置异步请求对象时,如使用
XMLHttpRequest
或fetch
等,就可以开始进行一些基础的错误处理。例如,当浏览器不支持XMLHttpRequest
或者fetch
时,可以提前捕获并处理这种兼容性错误。if (!window.XMLHttpRequest &&!window.fetch) { console.error('当前浏览器不支持 XMLHttpRequest 和 fetch,请更换浏览器或检查兼容性。'); return; }
- 对于网络连接错误,如无法连接到服务器等情况,也可以在这个阶段进行捕获和处理。在
XMLHttpRequest
中,可以通过监听error
事件来处理;在fetch
中,可以通过catch
方法捕获Promise
的拒绝来处理。
```javascript
// XMLHttpRequest 示例
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api/data');
xhr.onerror = function() {
console.error('网络连接错误,无法连接到服务器。');
};
xhr.send();
// fetch 示例
fetch('http://example.com/api/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => {
console.error('网络连接错误或请求被阻止:', error);
});
### 请求过程阶段
- 当异步请求正在进行时,如果出现如请求超时等错误,可以在相应的设置和监听中进行处理。例如,使用 `XMLHttpRequest` 时,可以设置超时时间,并在超时事件中进行错误处理。
```javascript
xhr.open('GET', 'http://example.com/api/data');
xhr.timeout = 5000; // 设置超时时间为5秒
xhr.ontimeout = function() {
console.error('请求超时,请检查网络连接或稍后重试。');
};
xhr.send();
- 对于一些需要在请求过程中进行特殊处理的错误,如在上传大文件时,可能会出现文件读取错误、上传中断等情况,也可以在相应的上传进度监听或事件处理函数中进行错误处理。
请求响应阶段
- 这是最常见的错误处理阶段,主要是根据服务器返回的响应状态码来判断请求是否成功,并对不同的错误状态码进行相应的处理。例如,在
XMLHttpRequest
的readystatechange
事件或fetch
的then
方法中,可以检查响应状态码是否在200 - 299
之间,如果不在则表示请求失败,根据不同的状态码进行不同的错误处理。
```javascript
// XMLHttpRequest 示例
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
} else {// 请求成功,处理响应数据 var response = JSON.parse(xhr.responseText); console.log(response);
}// 根据不同的状态码进行错误处理 if (xhr.status === 400) { console.error('请求参数错误'); } else if (xhr.status === 401) { console.error('未授权访问'); } else if (xhr.status === 404) { console.error('请求的资源未找到'); } else { console.error('请求失败,状态码:', xhr.status); }
}
};
// fetch 示例
fetch('http://example.com/api/data')
.then(response => {
if (!response.ok) {
if (response.status === 400) {
console.error('请求参数错误');
} else if (response.status === 401) {
console.error('未授权访问');
} else if (response.status === 404) {
console.error('请求的资源未找到');
} else {
console.error('请求失败,状态码:', response.status);
}
throw new Error('请求失败');
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error('请求失败:', error));
### 数据处理阶段
- 在接收到服务器响应数据后,对数据进行解析和处理时,也可能会出现错误。例如,当服务器返回的数据格式不符合预期,如 JSON 数据格式错误时,在使用 `JSON.parse()` 方法解析数据时会抛出错误,此时可以使用 `try/catch` 块来捕获并处理这种错误。
```javascript
try {
var responseData = JSON.parse(xhr.responseText);
// 进一步处理数据
processData(responseData);
} catch (error) {
console.error('数据解析错误:', error);
}
异步请求中的错误处理可以根据不同的错误类型和需求,放在请求发起、请求过程、请求响应以及数据处理等多个阶段进行,通过全面而细致的错误处理,可以提高应用程序的稳定性和可靠性,为用户提供更好的体验。