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

轻松学习Python，无需理论负担。在浏览器中直接解决带自动检查的实践任务，无需安装任何东西。

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

在现代 Web 开发中，与外部 API 和服务器交互是一项基本任务。无论是获取天气数据、提交表单还是集成支付网关，您都需要一个 HTTP 客户端。在本文中，我们将详细讲解如何在 JavaScript (Node.js) 中正确创建 HTTP 请求：从工具选择到错误处理和优化。您将学习如何编写可靠且高效的代码。

1. 工具选择：原生功能 vs 库

Node.js 提供了多种执行 HTTP 请求的方式。选择取决于任务的复杂程度和个人偏好。

1.1. 内置模块 `http` / `https`

这是最低级别的方法。它提供了完全的控制权，但对于简单的请求需要编写大量代码。

const https = require('https');

function getUsers() {  return new Promise((resolve, reject) => {    const url = 'https://jsonplaceholder.typicode.com/users';    https.get(url, (res) => {      let data = '';      res.on('data', chunk => data += chunk);      res.on('end', () => {        try {          resolve(JSON.parse(data));        } catch (e) {          reject(e);        }      });    }).on('error', reject);  });}

getUsers().then(console.log).catch(console.error);

1.2. 全局 `fetch` (Node.js 18+)

从版本 18 开始，Node.js 引入了原生 fetch，与浏览器中的用法类似。这是一个现代且方便的 API。

async function getPosts() {  try {    const response = await fetch('https://jsonplaceholder.typicode.com/posts');    if (!response.ok) {      throw new Error(`HTTP error! status: ${response.status}`);    }    const data = await response.json();    return data;  } catch (error) {    console.error('Fetch error:', error);    throw error;  }}

getPosts().then(posts => console.log(posts.slice(0, 2)));

1.3. 流行库：`axios`

axios 是最流行的 HTTP 请求库。它提供了方便的 API、Promise 支持、拦截器 (interceptors) 和自动 JSON 解析。

const axios = require('axios');

async function createTodo() {  try {    const response = await axios.post('https://jsonplaceholder.typicode.com/todos', {      title: '学习 HTTP 客户端',      completed: false,      userId: 1    });    console.log('已创建:', response.data);    return response.data;  } catch (error) {    console.error('错误:', error.response?.data || error.message);  }}

createTodo();

总结： 对于简单脚本，使用 fetch。对于包含大量请求和拦截器的严肃项目，使用 axios。将 http 模块留给特定情况使用。

2. 主要请求类型与数据处理

我们来详细讲解如何使用 axios 正确发送 GET、POST、PUT 和 DELETE 请求。

2.1. GET — 获取数据

async function getUser(id) {  try {    const { data } = await axios.get(`https://jsonplaceholder.typicode.com/users/${id}`);    return data;  } catch (error) {    throw new Error(`无法获取用户 ${id}: ${error.message}`);  }}

2.2. POST — 创建资源

在请求体中传递数据。指定内容类型 (Content-Type) 很重要。Axios 会自动为 JSON 处理这一点。

async function createUser(userData) {  const response = await axios.post('https://jsonplaceholder.typicode.com/users', userData, {    headers: {      'Content-Type': 'application/json'    }  });  return response.data;}