14、 使用 Fetch API 和 XMLHttpRequest 进行资源请求

### 使用 Fetch API 和 XMLHttpRequest 实现 HTTP 请求 #### 1. Fetch API 的实现方法 Fetch API 提供了一种更现代化的方式用于发起网络请求。它返回的是一个 Promise 对象，允许开发者通过链式调用来处理异步操作。 以下是使用 Fetch API 发起 GET 请求的一个简单示例： ```javascript fetch('https://api.example.com/data') // URL 或路径 .then(response => { if (!response.ok) { // 检查状态码是否成功 throw new Error(`HTTP error! status: ${response.status}`); } return response.json(); // 将响应解析为 JSON 数据 }) .then(data => console.log(data)) // 处理数据 .catch(error => console.error('Error:', error)); // 错误捕获 ``` 如果需要发送 POST 请求，则可以通过传递配置对象来指定请求参数[^1]： ```javascript fetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value' }) // 转换为字符串形式的数据体 }) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('Error:', error)); ``` --- #### 2. XMLHttpRequest 的实现方法 XMLHttpRequest 是一种较老的技术，但它仍然广泛应用于许多项目中。它的主要特点是提供了事件驱动模型来进行请求监听和错误处理。 下面是一个基于 `GET` 方法的 XMLHTTPRequest 示例： ```javascript const xhr = new XMLHttpRequest(); xhr.open('GET', 'https://api.example.com/data', true); // 初始化请求 (true 表明异步) // 设置回调函数以处理加载完成后的逻辑 xhr.onload = function () { if (this.status >= 200 && this.status < 300) { // 成功范围内的状态码 const data = JSON.parse(this.responseText); console.log(data); } else { console.error('Request failed with status:', this.status); } }; // 设置错误处理器 xhr.onerror = function () { console.error('Network request failed'); }; // 发送请求 xhr.send(); ``` 对于 `POST` 请求，可以按照如下方式进行设置： ```javascript const xhr = new XMLHttpRequest(); xhr.open('POST', 'https://api.example.com/data', true); // 配置头部信息 xhr.setRequestHeader('Content-Type', 'application/json'); // 定义 onload 函数 xhr.onload = function () { if (this.status === 200 || this.status === 201) { const data = JSON.parse(this.responseText); console.log(data); } else { console.error('Request failed with status:', this.status); } }; // 定义 onerror 函数 xhr.onerror = function () { console.error('Network request failed'); }; // 发送带有主体的内容 xhr.send(JSON.stringify({ key: 'value' })); ``` --- ### 总结对比 尽管两者都可以满足基本的 HTTP 请求需求，但 Fetch API 更加简洁易读，并且支持现代 JavaScript 特性如 Promises 和 async/await 结构。而 XMLHttpRequest 则更加灵活，在某些特定场景下可能更适合复杂的需求。