JavaScript 发起 HTTP 请求详解：从 XMLHttpRequest 到 Fetch

JavaScript 发起 HTTP 请求：从 XMLHttpRequest 到 Fetch

在 Web 开发中，与服务器交互并获取数据是不可或缺的一部分。JavaScript 提供了强大的工具来实现这一目标，其中最常用的两种方法是使用 XMLHttpRequest 对象和 fetch 函数。本文将深入探讨这两种方法，并提供示例代码和最佳实践。

1. 使用 XMLHttpRequest 对象

XMLHttpRequest 对象是 AJAX 的核心，它允许您在不刷新整个页面的情况下发送 HTTP 请求并处理服务器响应。以下是使用 XMLHttpRequest 发送 GET 和 POST 请求的步骤：

1.1 发送 GET 请求javascript// 创建 XMLHttpRequest 对象var xhr = new XMLHttpRequest();

// 设置请求方法和 URLxhr.open('GET', 'https://api.example.com/data', true);

// 设置请求头（可选）xhr.setRequestHeader('Content-Type', 'application/json');

// 设置响应类型（可选）xhr.responseType = 'json';

// 监听请求完成事件xhr.onload = function() { if (xhr.status >= 200 && xhr.status < 300) { // 请求成功，处理响应数据 console.log(xhr.response); } else { // 请求失败 console.error('请求失败:', xhr.status); }};

// 处理网络错误xhr.onerror = function() { console.error('网络错误');};

// 发送请求xhr.send();

1.2 发送 POST 请求javascript// 创建 XMLHttpRequest 对象var xhr = new XMLHttpRequest();

// 设置请求方法和 URLxhr.open('POST', 'https://api.example.com/data', true);

// 设置请求头xhr.setRequestHeader('Content-Type', 'application/json');

// 发送请求并传递数据xhr.send(JSON.stringify({ key: 'value' }));

// 监听请求完成事件// ... (与 GET 请求相同)

代码解析:

• 首先，我们使用 new XMLHttpRequest() 创建一个新的 XMLHttpRequest 对象。* 然后，使用 open() 方法初始化请求，设置请求方法（GET 或 POST）、URL 和是否异步（true 表示异步）。* 对于 POST 请求，使用 setRequestHeader() 方法设置 Content-Type 请求头，指示服务器请求体的数据类型。* 使用 send() 方法发送请求。对于 GET 请求，send() 方法不带参数；对于 POST 请求，将数据作为参数传递给 send() 方法。* 最后，使用 onload 事件处理程序监听请求完成事件。在 onload 事件处理程序中，检查响应状态码以确定请求是否成功，并根据需要处理响应数据。

2. 使用 Fetch 函数

fetch() 函数是现代 JavaScript 中用于发起 HTTP 请求的更简洁、更强大的 API。它返回一个 Promise 对象，允许您使用链式调用处理响应和错误。

2.1 发送 GET 请求javascriptfetch('https://api.example.com/data') .then(response => { if (!response.ok) { throw new Error('请求失败: ' + response.status); } return response.json(); // 解析 JSON 响应 }) .then(data => { console.log(data); // 处理响应数据 }) .catch(error => { console.error(error); // 处理错误 });

2.2 发送 POST 请求javascriptfetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value' })}) .then(response => { if (!response.ok) { throw new Error('请求失败: ' + response.status); } return response.json(); }) .then(data => { console.log(data); }) .catch(error => { console.error(error); });

代码解析:

• fetch() 函数接受 URL 作为第一个参数，并返回一个 Promise 对象。* 使用 .then() 方法处理 Promise 的成功状态，并使用 response.json() 方法解析 JSON 响应。* 使用 .catch() 方法处理 Promise 的失败状态，例如网络错误或服务器错误。* 对于 POST 请求，在 fetch() 函数的第二个参数中传递一个配置对象，包括请求方法、请求头和请求体等。

总结

XMLHttpRequest 和 fetch 都是 JavaScript 中强大的 HTTP 请求工具。XMLHttpRequest 提供了更细粒度的控制，而 fetch 则提供了更简洁的语法和 Promise 支持。选择哪种方法取决于您的具体需求和编码风格。