JavaScript 发送 HTTP 请求： 使用 Fetch API 实现异步通信

使用 JavaScript Fetch API 发送 HTTP 请求

在现代 Web 开发中，使用 JavaScript 发送 HTTP 请求是构建动态和交互式应用程序的关键。Fetch API 提供了一种简洁而强大的方式来实现这一点。

什么是 Fetch API？

Fetch API 是一个现代的 JavaScript 接口，用于发送网络请求并处理响应。它取代了传统的 XMLHttpRequest 对象，并提供了一种更简洁、基于 Promise 的方法。

使用 Fetch API 发送 GET 请求

以下代码示例演示了如何使用 fetch 函数发送 GET 请求：javascriptfetch('https://api.example.com/data') .then(response => { // 检查响应是否成功 if (!response.ok) { throw new Error('Network response was not ok'); } // 解析响应数据（假设是 JSON 格式） return response.json(); }) .then(data => { // 处理响应数据 console.log(data); }) .catch(error => { // 处理错误 console.error('Fetch error:', error); });

在这个例子中：

1. 我们使用 fetch 函数发送请求到指定的 URL。2. then 方法用于处理响应。3. 我们检查响应状态码 (response.ok) 以确保请求成功。4. 我们使用 response.json() 方法将 JSON 格式的响应数据解析为 JavaScript 对象。5. 最后，我们处理响应数据或捕获任何错误。

使用 Fetch API 发送 POST 请求

发送 POST 请求类似于 GET 请求，但我们需要提供请求方法和请求体：javascriptconst data = { key: 'value' };

fetch('https://api.example.com/submit', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(data),}) .then(response => { // 处理响应 }) .catch(error => { // 处理错误 });

在这个例子中：

1. 我们指定请求方法为 'POST'。2. 我们设置 Content-Type 标头以指示我们发送 JSON 数据。3. 我们使用 JSON.stringify 方法将 JavaScript 对象转换为 JSON 字符串并将其作为请求体发送。

总结

Fetch API 提供了一种强大而灵活的方式来发送 HTTP 请求。它易于使用、基于 Promise，并且与现代 JavaScript 开发实践相一致。通过学习和使用 Fetch API，您可以构建更强大、更具交互性的 Web 应用程序。