JavaScript 发出 HTTP 请求：Fetch API 使用指南

在 Web 开发中，经常需要使用 JavaScript 发出 HTTP 请求与服务器进行通信。JavaScript 提供了多种方式来实现这一目标，其中最常用的方法之一是 Fetch API。

使用 Fetch API 发出 GET 请求

Fetch API 提供了一个全局的 fetch() 函数，用于发出 HTTP 请求。以下是一个使用 fetch() 函数发出 GET 请求并处理响应的示例：javascriptfetch('https://api.example.com/data') .then(response => response.json()) .then(data => { console.log(data); }) .catch(error => { console.error('Error:', error); });

这段代码执行以下操作：

使用 fetch() 函数向 'https://api.example.com/data' 发送 GET 请求。2. 使用 .then() 方法处理成功响应。3. 使用 response.json() 将响应解析为 JSON 格式。4. 将解析后的数据打印到控制台。5. 使用 .catch() 方法捕获并处理错误。

使用 Fetch API 发出 POST 请求

除了 GET 请求，Fetch API 也支持发送其他类型的请求，例如 POST 请求。要发送 POST 请求，您需要在 fetch() 函数的第二个参数中指定请求方法和请求体。

以下是一个发送 POST 请求的示例：javascriptfetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ username: 'john', password: 'secret' }),}) .then(response => response.json()) .then(data => { console.log(data); }) .catch(error => { console.error('Error:', error); });

这段代码执行以下操作：

使用 fetch() 函数向 'https://api.example.com/data' 发送 POST 请求。2. 设置请求方法为 'POST'。3. 设置请求头 'Content-Type' 为 'application/json'，表示请求体为 JSON 格式。4. 使用 JSON.stringify() 将 JavaScript 对象转换为 JSON 字符串，并将其设置为请求体。5. 处理响应和错误的方式与 GET 请求相同。

注意事项

Fetch API 在不同的运行环境中可能会有所不同，请参考相关文档以获取详细信息。* 在浏览器环境中使用 Fetch API 时，需要注意跨域请求的安全性问题。* 除了 response.json()，您还可以使用其他方法解析响应，例如 response.text() 或 response.blob()，具体取决于响应的内容类型。

希望这篇文章能帮助您理解如何使用 JavaScript 的 Fetch API 发出 HTTP 请求。 Happy coding!