JavaScript 发起 HTTP 请求：GET、POST 方法详解及代码示例

JavaScript 发起 HTTP 请求：GET、POST 方法详解及代码示例

在 JavaScript 中，你可以使用内置的 fetch 函数轻松发起 HTTP 请求，包括常用的 GET 和 POST 方法。fetch 函数支持设置请求头、传递数据等，功能强大且易于使用。

1. 使用 fetch 函数发送 GET 请求

以下代码演示了如何使用 fetch 函数发送 GET 请求，并将响应解析为 JSON 格式：javascriptfetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));

代码解释：

1. 我们将请求的 URL (https://api.example.com/data) 传递给 fetch 函数。2. 使用 .then 方法链式调用处理响应。3. response.json() 方法将响应转换为 JSON 格式。4. console.log(data) 将解析后的 JSON 数据打印到控制台。5. .catch 方法用于捕获请求过程中的错误，并在控制台打印错误信息。

2. 使用 fetch 函数发送 POST 请求

以下代码演示了如何使用 fetch 函数发送 POST 请求，并在请求中传递 JSON 数据：javascriptfetch('https://api.example.com/data', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ key: 'value' })}) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));

代码解释：

1. 我们将请求的 URL 和一个包含请求选项的对象传递给 fetch 函数。2. method: 'POST' 指定请求方法为 POST。3. headers 对象设置请求头，此处将 Content-Type 设置为 application/json，表示发送的数据是 JSON 格式。4. body 属性包含要发送的数据，使用 JSON.stringify 方法将 JavaScript 对象转换为 JSON 字符串。5. 其余部分与 GET 请求示例相同，处理响应并捕获错误。

总结

通过以上示例，你可以清晰地了解如何使用 JavaScript 的 fetch 函数发送 GET 和 POST 请求，并根据需要设置请求头和传递数据。fetch 函数为开发者提供了一种简洁、灵活的方式来处理 HTTP 请求，是现代 JavaScript 开发中不可或缺的一部分。