JavaScript 发出 HTTP 请求教程： GET/POST 方法详解

在现代 Web 开发中，使用 JavaScript 发出 HTTP 请求是与服务器交互和构建动态应用的必备技能。JavaScript 提供了 fetch() 函数，使得发送 HTTP 请求变得非常简单。

1. 使用 GET 方法获取数据

fetch() 函数默认发送 GET 请求。以下示例演示如何使用 fetch() 函数获取 JSON 格式的数据：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    // 处理返回的数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error('发生错误:', error);
  });

代码解析：

fetch('https://api.example.com/data')：向目标 URL 发送 GET 请求。
.then(response => response.json())：将响应转换为 JSON 格式。
.then(data => { ... })：成功获取数据后，在 data 参数中处理数据。
.catch(error => { ... })：捕获并处理请求过程中发生的错误。

2. 使用 POST 方法发送数据

你可以通过传递一个配置对象来自定义 fetch() 函数的行为，例如指定请求方法、请求头和请求体。以下示例演示如何发送 POST 请求：

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ name: 'John', age: 30 }),
})
  .then(response => response.json())
  .then(data => {
    // 处理返回的数据
    console.log(data);
  })
  .catch(error => {
    // 处理错误
    console.error('发生错误:', error);
  });

代码解析：

method: 'POST'：指定请求方法为 POST。
headers: { 'Content-Type': 'application/json' }：设置请求头，指定数据类型为 JSON。
body: JSON.stringify({ name: 'John', age: 30 })：将 JavaScript 对象转换为 JSON 字符串，并作为请求体发送。

总结

fetch() 函数为 JavaScript 提供了一种灵活且强大的方式来发出 HTTP 请求。通过配置不同的参数，你可以轻松地进行 GET、POST 以及其他类型的请求，并处理服务器返回的数据。希望本教程能帮助你更好地理解和使用 fetch() 函数。