fetch() 和 XMLHttp 需避免的错误

在前端开发中，fetch() 和 XMLHttpRequest（简称 XMLHttp）是用于进行 HTTP 请求的重要工具。然而，开发者在使用它们时常常会遇到一些错误，以下将详细介绍这些需要避免的错误。

首先是 fetch() 的常见错误。fetch() 是现代 JavaScript 中用于发起网络请求的 API，使用简单直观。但很多人容易忽略它的一个特性：fetch() 不会因为 HTTP 错误状态码（如 404、500 等）而抛出异常。这意味着即使服务器返回错误状态码，fetch() 也会正常 resolve，开发者需要手动检查响应状态码来处理错误。例如：

fetch('https://example.com/api/data')
 .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
 .then(data => console.log(data))
 .catch(error => console.error('Error:', error));

另一个常见错误是在处理 fetch() 的响应数据时，没有正确处理流。fetch() 的响应是一个 ReadableStream，需要正确的方法将其转换为合适的数据格式，如 json()、text() 或 blob()。如果没有正确使用这些方法，可能导致数据解析错误。

接下来看看 XMLHttp 的易错点。XMLHttp 是较老的技术，使用时需要创建 XMLHttpRequest 对象，并手动监听各种状态变化。其中一个常见错误是没有正确处理 readyState 和 status 属性。readyState 表示请求的状态，只有当 readyState 为 4 且 status 为 200 时，请求才成功完成。例如：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/api/data', true);
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log(xhr.responseText);
        } else {
            console.error('Request failed with status:', xhr.status);
        }
    }
};
xhr.send();

在使用 XMLHttp 时，跨域问题也是一个常见错误点。由于同源策略，默认情况下 XMLHttp 不能向不同源的服务器发送请求。需要通过 JSONP、CORS 等技术来解决。

无论是 fetch() 还是 XMLHttp，在使用过程中都需要注意这些常见错误，确保网络请求的稳定性和正确性，提升前端应用的质量。