深入浅出：如何在 JavaScript 中发送 HTTP POST 请求

2026-02-01 09:13:29 0条评论 4次阅读 0人点赞

欢迎来到这篇关于 JavaScript 网络请求的深度指南。作为一名开发者，我们经常需要在应用程序中将数据发送回服务器，无论是提交用户表单、上传文件，还是与第三方 API 进行交互。在这篇文章中，我们将深入探讨在 JavaScript 中发送 HTTP POST 请求的各种方法、最佳实践以及底层的工作原理。

为什么 HTTP POST 请求如此重要？

在深入代码之前，让我们先理解一下 POST 请求的核心作用。与用于从服务器获取数据的 GET 请求不同，POST 请求的设计初衷是向服务器发送数据以创建或更新资源。由于 GET 请求的参数通常暴露在 URL 中，它们不适合传输敏感信息；而 POST 请求将数据包含在请求体中，这使其更加安全，并且能够处理更复杂的数据格式。

我们将重点探索目前最主流的两种方式：现代浏览器首选的 Fetch API 和经典的 XMLHttpRequest (XHR)。准备好，让我们开始吧！

探索 Fetch API

Fetch API 是现代 JavaScript 中进行网络请求的基石。它基于 Promise 构建，提供了一种更强大、更灵活的操作接口，避免了旧式回调地狱的问题。作为一个内置方法，它接受至少一个参数——请求的端点（API URL），但对于 POST 请求，我们需要在第二个参数对象中配置更多的细节。

请求结构解析

当我们使用 Fetch 发起 POST 请求时，通常会关注以下三个核心配置：

  • INLINECODE6e9eecf1: 指定请求方法为 INLINECODEbe55aa58。
  • INLINECODE26376a1f: 这是一个包含元数据的对象，告诉服务器我们发送的是什么类型的数据。例如，INLINECODE4cd8cc61 告诉服务器请求体是 JSON 格式。
  • INLINECODEb9e50835: 这是我们实际要发送的数据内容。注意，HTTP 协议传输的是文本，所以我们需要使用 INLINECODEfa96b070 将 JavaScript 对象转换为字符串。

基础示例：向 Placeholder API 发送数据

让我们通过一个实际的例子来看看如何操作。我们将使用 jsonplaceholder.typicode.com 这个公共测试 API 来模拟创建一个新的“待办事项”。

在这个例子中，我们将构建一个包含用户 ID、标题和完成状态的数据对象，并将其发送到服务器。



  
    
    
    Fetch POST 示例
  
  
    
控制台查看结果

    
      // 定义我们要发送的数据对象
      const todoData = {
        userId: 1,
        title: "学习 Fetch API",
        completed: false,
      };

      // 使用 fetch 发送 POST 请求
      fetch("https://jsonplaceholder.typicode.com/todos", {
        method: "POST", // 指定请求方法
        // 将 JavaScript 对象转换为 JSON 字符串
        body: JSON.stringify(todoData),
        // 设置请求头，告知服务器内容类型为 JSON
        headers: {
          "Content-type": "application/json; charset=UTF-8",
        },
      })
        .then((response) => {
          // 检查响应状态，确保请求成功
          if (!response.ok) {
            throw new Error(`网络响应失败: ${response.status}`);
          }
          return response.json(); // 解析 JSON 响应数据
        })
        .then((json) => {
          // 在这里处理服务器返回的数据
          console.log("服务器响应成功:", json);
          alert("数据已发送！请打开控制台查看详情。");
        })
        .catch((error) => {
          // 捕获并处理任何错误
          console.error("发送请求时出错:", error);
        });

进阶示例：Async/Await 语法糖

虽然 INLINECODEf57f2930 链式调用非常强大，但在处理复杂的异步逻辑时，代码可能会变得难以阅读。现代 JavaScript 推荐使用 INLINECODEd7f20b0b 语法，它让异步代码看起来像同步代码一样清晰。

让我们用 async/await 重写上面的逻辑。你会发现代码结构更加扁平化，错误处理也更为直观。

// 封装一个异步函数来处理请求
async function postData(url = "", data = {}) {
  try {
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });

    // 检查 HTTP 状态码，如果不成功则抛出错误
    if (!response.ok) {
      throw new Error(`HTTP 错误! 状态: ${response.status}`);
    }

    const result = await response.json();
    console.log("请求成功，返回数据:", result);
    return result;
  } catch (error) {
    console.error("无法发送数据:", error);
  }
}

// 调用函数
document.addEventListener(‘DOMContentLoaded‘, () => {
    postData("https://jsonplaceholder.typicode.com/todos", {
        userId: 1,
        title: "使用 Async/Await",
        completed: true,
    });
});

常见问题：如何处理 FormData？

并非所有的 API 都接受 JSON。有时我们需要模拟表单提交，这时候就需要使用 INLINECODE7699018f。使用 INLINECODE5ed9f3f6 的好处是浏览器会自动设置适当的 INLINECODE5054928e（通常是 INLINECODEfe12e081），并且我们不需要手动对数据进行 stringify 处理。

const formData = new FormData();
formData.append(‘userName‘, ‘JohnDoe‘);
formData.append(‘userFile‘, fileInput.files[0]);

fetch(‘https://example.com/upload‘, {
  method: ‘POST‘,
  body: formData // 直接传入 formData 对象，不要设置 Content-Type 头
})
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.error(‘Error:‘, error));

回溯历史：使用 Ajax (XMLHttpRequest)

在 Fetch API 出现之前，XMLHttpRequest (XHR) 是我们与服务器通信的唯一途径。虽然现在 Fetch 已经成为主流，但了解 XHR 对于维护遗留代码库或理解 Web 历史至关重要。XHR 是一个内置对象，它已经存在了很长时间，并且在几乎所有现代浏览器中都得到了支持。

XHR 的工作流程

使用 XHR 发送 POST 请求的步骤比 Fetch 稍显繁琐：

  • 实例化: 创建一个 XMLHttpRequest 对象。
  • 配置: 使用 .open() 方法初始化请求，指定方法（"POST"）和 URL。
  • 设置请求头: 使用 INLINECODEa3968793 设置 Content-Type。注意，这一步必须在 INLINECODE0acc2146 之后、.send() 之前调用。
  • 监听状态变化: 定义 INLINECODE82a153b0 或 INLINECODE10d632d7 回调函数来处理响应。
  • 发送: 调用 .send() 方法，将数据作为参数传入。

XHR 实战示例

让我们用 XHR 来完成同样的任务——发送一条 Todo 数据。请注意这里的手动状态检查逻辑，这是 XHR 时代的典型特征。





    
    
    XHR POST 示例



    
控制台查看结果

    
        // 1. 创建 XHR 对象
        const xhr = new XMLHttpRequest();

        // 2. 构建要发送的数据
        const data = {
            userId: 1,
            title: "使用 XMLHttpRequest 发送数据",
            body: "这是一个测试请求体",
        };

        // 3. 初始化请求
        xhr.open("POST", "https://jsonplaceholder.typicode.com/posts");

        // 4. 设置请求头，告诉服务器我们发送的是 JSON
        xhr.setRequestHeader("Content-Type", "application/json");

        // 5. 定义响应处理函数
        xhr.onload = function () {
            // readyState 4 表示操作完成
            // status 范围 200-299 表示成功
            if (xhr.readyState === 4 && xhr.status >= 200 && xhr.status < 300) {
                try {
                    const response = JSON.parse(xhr.responseText);
                    console.log("XHR 请求成功，服务器返回:", response);
                } catch (e) {
                    console.error("解析 JSON 失败", e);
                }
            } else {
                console.log(`请求出错，状态码: ${xhr.status}`);
            }
        };

        // 6. 处理网络错误
        xhr.onerror = function () {
            console.error("网络连接发生错误");
        };

        // 7. 发送请求（必须将对象转为 JSON 字符串）
        xhr.send(JSON.stringify(data));

Fetch vs XHR：我们应该选择哪一个？

作为开发者，我们经常需要在两者之间做出选择。以下是我们的实战建议：

  • 使用 Fetch API 的情况：这是绝大多数新项目的默认选择。它语法简洁，支持 Promise，原生支持流数据，并且更好地处理了 CORS（跨域资源共享）问题。它是 Web 标准的未来方向。
  • 使用 XHR 的情况：除非你需要支持非常古老的浏览器（如 IE11），或者需要监听上传进度（虽然 Fetch 现在也可以通过流来实现，但 XHR 的 upload.onprogress 在旧代码中非常常见），否则不建议在新项目中使用。

实战中的最佳实践与常见陷阱

在掌握了基本语法后，让我们来看看在实际工程开发中，我们需要注意什么。

1. CORS（跨域资源共享）

在本地开发时，你可能会遇到控制台报错：Access to fetch at ‘...‘ from origin ‘...‘ has been blocked by CORS policy。这是一个安全特性。要解决这个问题，通常由后端服务器配置允许的来源头，或者在前端开发环境中配置代理服务器将请求转发。

2. 错误处理

这是新手最容易犯错的地方。在 Fetch API 中，只有当网络故障或请求被阻止时，Promise 才会 reject。如果服务器返回 404 或 500 状态码，Fetch 不会 抛出错误，Promise 依然会 resolve。因此，我们必须手动检查 INLINECODE9ac69f56 或 INLINECODEc596027e，就像我们在 async/await 示例中做的那样。

3. 性能优化：序列化开销

对于非常庞大的数据对象，JSON.stringify() 是一个同步操作，可能会阻塞主线程。如果用户设备性能较差，这可能会导致界面卡顿。在处理超大数据时，可以考虑使用 Web Worker 来进行序列化，或者分批发送数据。

4. 超时处理

XHR 原生支持 INLINECODE4a953cb2 属性和 INLINECODE364948cf 事件，但 Fetch API 没有内置的请求超时机制。在实际应用中，我们需要结合 INLINECODE11af4615 或 INLINECODE877b3d0a 来实现超时中断功能。

使用 AbortController 的示例：

const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 5000); // 5秒后超时

fetch("https://example.com/api", {
  signal: controller.signal
})
.then(response => response.json())
.then(data => console.log(data))
.catch(err => {
  if (err.name === ‘AbortError‘) {
    console.error(‘请求超时‘);
  } else {
    console.error(‘请求失败‘, err);
  }
})
.finally(() => clearTimeout(timeoutId));

总结与展望

通过这篇文章，我们一起探索了在 JavaScript 中发送 HTTP POST 请求的两种主要方式。我们从现代的 Fetch API 出发，学习了如何发送 JSON 数据、处理错误以及使用 async/await 优化代码结构。同时，我们也回顾了经典的 XMLHttpRequest，了解了 Web 开发的历史基石。

关键要点回顾：

  • Fetch API 是现代开发的首选，基于 Promise，语法简洁，请优先使用它。
  • JSON.stringify 是发送 JSON 数据的关键步骤，不要忘记配置 Content-Type 头部。
  • 错误处理 至关重要，Fetch 不会自动将 HTTP 错误状态视为异常，你需要手动检查。
  • XMLHttpRequest 虽然老旧，但在某些特定场景（如上传进度监听）下依然有用武之地。

希望这篇文章能帮助你在实际开发中更加自信地处理网络请求。现在，打开你的控制台，尝试发送你的第一个 POST 请求吧！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。如需转载，请注明文章出处豆丁博客和来源网址。https://shluqu.cn/19193.html
点赞
0.00 平均评分 (0% 分数) - 0 票

相关文章美国1G带宽/1T流量高速vps $17.99/年