在 JavaScript 中发出 HTTP 请求的不同方法

本文基于从文档和教程中获得的基础知识，探讨了发出 HTTP 请求的各种 JavaScript 方法。 我们将研究几种实用的方法。

1. 获取 API： 一种现代的内置 JavaScript 方法，取代旧的 XMLHttpRequest。它为 HTTP 请求提供了一个更干净、基于 Promise 的接口。 核心函数fetch()检索资源（如服务器数据）。

   <code class="language-javascript">fetch (URL, options)</code>

   登录后复制

   默认情况下，fetch() 使用 GET。 它返回一个解析为 Response 对象的 Promise。

   示例（改编自 MDN）：

   <code class="language-javascript">async function getData() {
     const url = "https://example.org/products.json";
     try {
       const response = await fetch(url);
       if (!response.ok) {
         throw new Error(`Response status: ${response.status}`);
       }
       const json = await response.json();
       console.log(json);
     } catch (error) {
       console.error(error.message);
     }
   }</code>

   登录后复制

   POST 请求： 对于 POST 请求，请在 method 对象中指定 headers、body 和 options。

   示例（改编自 MDN）：

   <code class="language-javascript">const response = await fetch("https://example.org/post", {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
     },
     body: JSON.stringify({ username: "example" }),
   });</code>

   登录后复制

   主要 Fetch API 功能： Fetch API 本质上支持 CORS（跨源资源共享），并提供对凭据（cookie、身份验证数据）的细粒度控制。

2. Axios： 一个流行的、用户友好的第三方库，与 Fetch API 相比简化了 HTTP 请求。 它是同构的（适用于 Node.js 和浏览器）。

   示例 POST（针对箭头功能进行修改）：

   <code class="language-javascript">const axios = require('axios');
   
   axios.get('/user?ID=12345')
     .then(response => console.log(response))
     .catch(error => console.log(error))
     .finally(() => {});</code>

   登录后复制

3. jQuery.ajax： jQuery 库的一部分，经常在遗留项目中找到。

   <code class="language-javascript">$.ajax({
     url: 'https://api.example.com/data',
     method: 'GET',
     success: function(data) { console.log(data); },
     error: function(error) { console.error('Error:', error); }
   });</code>

   登录后复制

4. WebSocket API： 内置 JavaScript API，用于在客户端和服务器之间建立持久的双向通信通道。非常适合实时应用程序（例如聊天）。

   示例（改编自 MDN）：

   <code class="language-javascript">const socket = new WebSocket("ws://localhost:8080");
   socket.addEventListener("open", (event) => { socket.send("Hello Server!"); });
   socket.addEventListener("message", (event) => { console.log("Message from server ", event.data); });</code>

   登录后复制

虽然 HTTP 请求的语法因语言和框架（PHP、Next.js 等）而异，但了解这些核心 JavaScript 方法为适应不同的上下文奠定了坚实的基础。

以上是在 JavaScript 中发出 HTTP 请求的不同方法的详细内容。更多信息请关注PHP中文网其他相关文章！