JavaScript 发起 HTTP 请求教程：GET、POST 等方法详解

想要使用 JavaScript 向服务器发送数据或获取信息？你需要掌握如何发起 HTTP 请求。

Fetch API：现代 JavaScript 的 HTTP 请求利器

fetch 函数是现代 JavaScript 中用于发起 HTTP 请求的标准方式，它提供了强大的功能和灵活的 API，可以满足各种 HTTP 请求需求。

发起 GET 请求

以下是如何使用 fetch 发起 GET 请求并处理响应的示例：

async function sendGetRequest() {
  try {
    const response = await fetch('http://example.com/api');
    if (!response.ok) {
      throw new Error('HTTP 请求失败');
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

sendGetRequest();

这段代码演示了以下步骤：

使用 fetch 函数向目标 URL ('http://example.com/api') 发起 GET 请求。
使用 response.ok 属性检查请求是否成功（状态码在 200-299 范围内）。
使用 response.json() 方法解析响应数据（假设服务器返回 JSON 格式数据）。
使用 console.log 打印响应数据。
使用 try...catch 块捕获和处理错误。

发起 POST 请求

要发起 POST 请求，你需要在 fetch 函数中传递第二个参数，该参数是一个包含请求方法、请求头和请求体的对象。

async function sendPostRequest() {
  try {
    const response = await fetch('http://example.com/api', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ key: 'value' })
    });

    // ... 处理响应
  } catch (error) {
    // ... 处理错误
  }
}

sendPostRequest();

在这个例子中，我们设置了请求方法为 'POST'，并添加了一个 'Content-Type' 请求头，指示服务器我们将发送 JSON 格式的数据。请求体使用 JSON.stringify 方法将 JavaScript 对象转换为 JSON 字符串。

总结

fetch API 是 JavaScript 中发起 HTTP 请求的强大工具。通过学习本文，你已经了解了如何使用 fetch 发起 GET 和 POST 请求，以及如何处理响应和错误。

想要了解更多关于 fetch API 的信息，请参考 MDN 文档： https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API