JavaScript HTTP客户端：从A到Z正确发起请求

JavaScript HTTP客户端：从A到Z正确发起请求

在现代Web开发中，与外部API和服务器进行交互是一项常规但至关重要的任务。无论您是在编写Node.js微服务、解析数据还是创建机器人，您都需要一个可靠的HTTP客户端。在本文中，我们将详细讲解如何在JavaScript (Node.js)中正确发起HTTP请求，介绍流行的库、错误处理、超时设置以及最佳实践。

1. 内置工具：http模块与node-fetch

Node.js内置了http和https模块，但它们的API属于底层接口，日常使用不够便捷。因此，通常使用封装好的库。

1.1. node-fetch (v3+)

从版本18开始，Node.js实验性地内置了对fetch的支持。对于更早的版本或需要扩展功能时，请使用node-fetch包。

// 安装：npm install node-fetch\nimport fetch from 'node-fetch';\n\nasync function getUsers() {\n  try {\n    const response = await fetch('https://jsonplaceholder.typicode.com/users');\n    if (!response.ok) {\n      throw new Error(`HTTP错误！状态码：${response.status}`);\n    }\n    const data = await response.json();\n    console.log(data);\n  } catch (error) {\n    console.error('请求错误：', error.message);\n  }\n}\n\ngetUsers();

1.2. 内置fetch (Node.js 18+)

用法与浏览器中的fetch类似：

// Node.js 18+ 无需额外包\nasync function postData() {\n  const response = await fetch('https://api.example.com/data', {\n    method: 'POST',\n    headers: { 'Content-Type': 'application/json' },\n    body: JSON.stringify({ key: 'value' })\n  });\n  return response.json();\n}

2. Axios — HTTP客户端的黄金标准

Axios是JavaScript中最流行的HTTP请求库。它提供了便捷的接口、Promise支持、拦截器（interceptors）以及自动JSON转换功能。

2.1. 安装与基本GET请求

// npm install axios\nconst axios = require('axios');\n\nasync function fetchUsers() {\n  try {\n    const response = await axios.get('https://jsonplaceholder.typicode.com/users');\n    console.log(response.data); // 数据已自动解析\n  } catch (error) {\n    console.error('错误：', error.message);\n  }\n}

2.2. 带数据的POST请求

async function createUser() {\n  const newUser = { name: '伊万', email: 'ivan@example.com' };\n  const response = await axios.post('https://jsonplaceholder.typicode.com/users', newUser);\n  console.log('用户已创建：', response.data);\n}

2.3. 设置超时与请求头

超时是防止应用程序挂起的关键选项：

async function fetchWithTimeout() {\n  try {\n    const response = await axios.get('https://slow-api.example.com/data', {\n      timeout: 5000, // 5秒\n      headers: {\n        'Authorization': 'Bearer token123',\n        'Accept': 'application/json'\n      }\n    });\n    return response.data;\n  } catch (error) {\n    if (error.code === 'ECONNABORTED') {\n      console.error('请求超时');\n    }\n  }\n}

3. 高级技巧与最佳实践

3.1. 错误处理与重试机制

网络环境不稳定，因此实现重试机制非常重要：

async function fetchWithRetry(url, retries = 3) {\n  for (let i = 0; i < retries; i++) {\n    try {\n      const response = await axios.get(url);\n      return response.data;\n    } catch (error) {\n      if (i === retries - 1) throw error; // 最后一次尝试\n      console.log(`第 ${i + 1} 次尝试失败，${(i + 1) * 1000}ms 后重试...`);\n      await new Promise(