JavaScript 发送 HTTP 请求教程：从 XMLHttpRequest 到 Fetch API

使用 JavaScript 发送 HTTP 请求

在 Web 开发中，经常需要使用 JavaScript 发送 HTTP 请求与服务器交互，获取数据或提交信息。

你可以使用两种主要方法来实现：

1. 传统的 XMLHttpRequest 对象
2. 现代的 fetch API

本教程将重点介绍更简洁易用的 fetch API。

使用 fetch API 发送 HTTP 请求

fetch API 提供了一种更现代、更简洁的方式来发送 HTTP 请求。它返回一个 Promise，可以方便地处理响应数据和错误。

以下是一个使用 fetch 发送 GET 和 POST 请求的示例代码：

async function sendHttpRequest(url, method, body = null, headers = {}) {
  try {
    const response = await fetch(url, {
      method: method,
      body: body,
      headers: headers
    });

    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error:', error);
    throw error;
  }
}

// 示例：发送 GET 请求
const url = 'https://api.example.com/data';
sendHttpRequest(url, 'GET')
  .then(data => {
    console.log('Response:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

// 示例：发送 POST 请求
const postData = { name: 'John', age: 30 };
const postUrl = 'https://api.example.com/save';
sendHttpRequest(postUrl, 'POST', JSON.stringify(postData), { 'Content-Type': 'application/json' })
  .then(data => {
    console.log('Response:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

代码解释：

• 我们定义了一个名为 sendHttpRequest 的异步函数，它接受 URL、请求方法、请求体和请求头作为参数。
• 函数内部使用 fetch 发送请求，并使用 await 等待响应。
• 如果请求成功，我们将响应解析为 JSON 格式并返回数据。
• 如果出现错误，我们将错误信息打印到控制台并抛出错误。

示例中展示了如何发送 GET 和 POST 请求，你可以根据需要修改请求方法、请求体和请求头。

总结

fetch API 为发送 HTTP 请求提供了一种更现代、更简洁的方式。它易于使用，并允许你轻松处理响应数据和错误。

请记住，这只是一个简单的示例，实际应用中可能需要根据具体需求进行调整。