JavaScript 发起 HTTP 请求终极指南：从入门到精通

在现代 Web 开发中，使用 JavaScript 发起 HTTP 请求是与服务器交互、获取数据和构建动态应用程序的必备技能。本指南将带您全面了解如何在不同环境下使用 JavaScript 发起 HTTP 请求，并提供详细的代码示例和最佳实践。

1. Node.js 环境

在 Node.js 环境中，我们可以使用内置的 http 模块发起 HTTP 请求。

// 引入 Node.js 的内置模块
const http = require('http');

// 定义请求参数
const options = {
  hostname: '目标主机名', // 例如：api.example.com
  port: 80, // 目标主机的端口号
  path: '/目标路径', // 例如：/api/data
  method: 'GET', // 请求方法，可以是 GET、POST、PUT、DELETE 等
  headers: { // 请求头
    'Content-Type': 'application/json', // 根据需要设置合适的 Content-Type
    // 其他头部参数...
  }
};

// 发起请求
const req = http.request(options, (res) => {
  // 处理响应
  let data = '';

  res.on('data', (chunk) => {
    data += chunk;
  });

  res.on('end', () => {
    console.log(data); // 打印响应数据
  });
});

req.on('error', (error) => {
  console.error(error); // 打印错误信息
});

// 可选：发送请求体数据
// req.write(JSON.stringify({ key: 'value' }));

req.end(); // 完成请求

2. 浏览器环境

在浏览器环境中，我们有两种常用的 API 可用于发起 HTTP 请求：

2.1 Fetch API

fetch API 是现代浏览器提供的一种更简洁、更灵活的发起 HTTP 请求的方式。

fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

2.2 XMLHttpRequest 对象

XMLHttpRequest 对象是传统浏览器中用于发起 HTTP 请求的主要方式。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(xhr.responseText);
  } else {
    console.error(xhr.statusText);
  }
};

xhr.onerror = function() {
  console.error(xhr.statusText);
};

xhr.send();

总结

本指南介绍了在 Node.js 和浏览器环境下使用 JavaScript 发起 HTTP 请求的常用方法。选择哪种方法取决于您的具体需求和目标环境。希望本指南能帮助您更好地理解和使用 JavaScript 进行网络编程！