原生 JS 发送 HTTP 请求：XMLHttpRequest 与 Fetch API 全解析及注意事项

在原生 JavaScript 中，可以使用 XMLHttpRequest 对象或者更现代的 Fetch API 来发送 HTTP 请求。 使用 XMLHttpRequest 对象 ```javascript // 创建一个 XMLHttpRequest 对象 const xhr = new XMLHttpRequest(); // 初始化一个请求，第一个参数是请求方法，第二个参数是请求的 URL xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts/1'); // 监听请求状态的变化 xhr.onreadystatechange = function() { // 当请求完成且状态码为 200 时，表示请求成功 if (xhr.readyState === 4 && xhr.status === 200) { // 解析响应的 JSON 数据 const response = JSON.parse(xhr.responseText); console.log(response); } }; // 发送请求 xhr.send(); ``` 使用 Fetch API ```javascript // 发送一个 GET 请求 fetch('https://jsonplaceholder.typicode.com/posts/1') // 将响应转换为 JSON 格式 .then(response => response.json()) // 处理 JSON 数据 .then(data => console.log(data)) // 处理请求过程中可能出现的错误 .catch(error => console.error('Error:', error)); ``` 我在以往的开发过程中，碰到过以下几点需要格外小心处理的地方： 1. 跨域问题：当请求的 URL 与当前页面的域名不可能会遇到跨域问题，需要服务器端进行相应的配置来允许跨域请求。 2. 错误处理：无论是使用 XMLHttpRequest 还是 Fetch API，都要确保对可能出现的错误进行处理，避免程序崩溃。 3. 兼容性：Fetch API 是比较新的 API，在一些旧版本的浏览器中可能不支持，需要考虑使用 polyfill 来保证兼容性。 ######[AI写代码神器 | 419点数解答 | 2025-08-20 17:25:29]