[Web自动化] JavaScriptAJAX与Fetch API

5.7 JavaScriptAJAX与Fetch API

在这一章中，我们将深入探讨AJAX（Asynchronous JavaScript and XML）技术以及现代Web开发中广泛使用的Fetch API。我们将从Fetch API的基本用法开始，逐步深入到处理JSON数据、设置请求头和响应头的细节。同时，为了全面理解，我们也会简要回顾XMLHttpRequest（XHR），这是AJAX技术的一种传统实现方式。

5.7.1 使用Fetch API发送HTTP请求

Fetch API简介

Fetch API提供了一个更加强大和灵活的方式来跨网络异步获取资源（包括跨域请求）。与XMLHttpRequest相比，Fetch API基于Promises，这使得异步代码更加简洁和易于管理。
基本用法

javascript 复制代码

fetch('https://api.example.com/data')
.then(response => {
 if (!response.ok) {
throw new Error('Network response was not ok');
 }
 return response.json(); // 解析JSON数据
})
.then(data => {
 console.log(data); // 处理数据
})
.catch(error => {
 console.error('There was a problem with your fetch operation:', error);
});

在这个例子中，我们首先通过fetch函数发送了一个GET请求到指定的URL。fetch函数返回一个Promise，该Promise在请求完成时解析为一个Response对象。然后，我们使用.then()方法处理这个Response对象，首先检查请求是否成功（response.ok），然后调用.json()方法将响应体解析为JSON格式的数据。如果在这个过程中发生任何错误（如网络问题或服务器错误），.catch()方法将捕获到这些错误。

5.7.2 处理JSON数据、设置请求头与响应头

处理JSON数据

如上例所示，处理JSON数据通常涉及调用response.json()方法，这将返回一个Promise，该Promise在解析JSON后解析为相应的JavaScript对象。
设置请求头

在发送请求时，有时需要设置特定的HTTP请求头，比如认证信息、内容类型等。这可以通过在fetch函数的第二个参数中指定一个配置对象来实现：

javascript 复制代码

fetch('https://api.example.com/data', {
method: 'POST', // 请求方法
headers: {
 'Content-Type': 'application/json', // 设置请求头
 'Authorization': 'Bearer your_Token_here' // 示例：设置认证信息
},
body: JSON.stringify({ key: 'value' }) // 发送的JSON数据
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

检查响应头

虽然Fetch API不直接允许你设置响应头（因为这是由服务器控制的），但你可以通过检查响应头来决定如何处理响应。例如，你可以检查Content-Type来确定返回的数据类型，并据此调用不同的解析方法（如.json(), .text(), .blob()等）。

5.7.3 XMLHttpRequest（传统方式，可作为了解）

虽然Fetch API是现代Web开发中处理HTTP请求的首选方式，但了解XMLHttpRequest（XHR）仍然是有价值的，特别是在需要兼容旧版浏览器或处理特定场景时。
基本用法

javascript 复制代码

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true); // 异步请求
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
 console.log(JSON.parse(xhr.responseText)); // 处理响应
}
};
xhr.send();

在这个例子中，我们首先创建了一个XMLHttpRequest对象，然后使用.open()方法初始化请求，指定请求方法、URL和是否异步处理。接着，我们设置了.onreadystatechange事件处理器来检查请求的状态，并在请求成功完成时处理响应。最后，我们调用.send()方法发送请求。