JavaScript发送HTTP请求：Fetch API 与 XMLHttpRequest实战指南

在前端开发中，使用JavaScript发送HTTP请求是必不可少的技能。本文将介绍两种常用的方法：现代的fetch API和传统的XMLHttpRequest对象，并提供详细的代码示例。

1. 使用Fetch API发送HTTP请求

fetch API是现代浏览器中内置的用于发送HTTP请求的强大工具。它简洁易用，并返回Promise对象，方便异步处理。

**代码示例：**javascriptfetch('https://api.example.com/data', { method: 'GET', // 可以是 'POST', 'PUT', 'DELETE' 等 headers: { 'Content-Type': 'application/json', // 根据需要设置请求头 // 其他请求头... }, // 可选：请求的正文 // body: JSON.stringify({ key: 'value' }),}) .then(response => response.json()) // 解析响应数据为JSON格式 .then(data => { // 处理响应数据 console.log(data); }) .catch(error => { // 处理错误 console.error('发生错误:', error); });

代码解析：

fetch()函数接受两个参数：请求URL和可选的配置对象。- 配置对象中可以设置请求方法（method）、请求头（headers）、请求正文（body）等。- fetch()函数返回一个Promise对象，可以使用.then()方法链式处理响应。- response.json()方法将响应数据解析为JSON格式。

2. 使用XMLHttpRequest对象发送HTTP请求

XMLHttpRequest对象是传统的发送HTTP请求的方式，在所有浏览器中都支持。

**代码示例：**javascriptvar xhr = new XMLHttpRequest();xhr.open('GET', 'https://api.example.com/data');xhr.setRequestHeader('Content-Type', 'application/json'); // 根据需要设置请求头

xhr.onload = function() { if (xhr.status === 200) { var data = JSON.parse(xhr.responseText); // 解析响应数据为JSON格式 // 处理响应数据 console.log(data); } else { // 处理错误 console.error('发生错误。状态码为:', xhr.status); }};

xhr.onerror = function() { // 处理错误 console.error('发生网络错误。');};

xhr.send(); // 发送请求

代码解析：

创建一个XMLHttpRequest对象。- 使用open()方法设置请求方法和URL。- 使用setRequestHeader()方法设置请求头。- 监听onload事件处理响应，使用xhr.status判断响应状态码。- 监听onerror事件处理网络错误。- 使用send()方法发送请求。

总结

fetch API和XMLHttpRequest对象都可以用来发送HTTP请求。fetch API更加简洁易用，而XMLHttpRequest对象则更加传统，兼容性更好。你可以根据项目需求和个人喜好选择合适的方法。

JavaScript发送HTTP请求：Fetch API 与 XMLHttpRequest实战指南