JavaScript 发起 HTTP 请求终极指南：Fetch 和 XMLHttpRequest 代码示例

JavaScript 发起 HTTP 请求终极指南：Fetch 和 XMLHttpRequest 代码示例

想要在你的 JavaScript 项目中与服务器交互？掌握如何发起 HTTP 请求至关重要！本指南将带你学习两种常用的方法：现代的 fetch 函数和经典的 XMLHttpRequest 对象。

使用 fetch 函数发起请求

fetch 函数提供了一种简洁直观的 API 来发起 HTTP 请求并处理响应。

fetch(url, {
  method: 'GET', // 可选：'POST', 'PUT', 'DELETE' 等
  headers: {
    'Content-Type': 'application/json', // 根据请求内容调整
    // 可选：添加授权信息
    // 'Authorization': 'Bearer yourAuthToken'
  },
  // 可选：发送请求体 (例如 POST 请求)
  // body: JSON.stringify({ key: 'value' })
})
.then(response => response.json()) // 解析 JSON 响应
.then(data => {
  // 处理响应数据
  console.log(data);
})
.catch(error => {
  // 处理请求错误
  console.error('请求出错：', error);
});

代码解析:

1. 使用 fetch(url, options) 发起请求，url 是目标服务器地址，options 是可选的配置对象。
2. method 属性指定 HTTP 方法，例如 'GET', 'POST', 'PUT', 'DELETE' 等。
3. headers 属性设置请求头，例如 Content-Type 和授权信息。
4. body 属性发送请求体数据，通常用于 POST 请求。
5. 使用 .then() 处理响应，并使用 .json() 方法解析 JSON 格式的响应数据。
6. 使用 .catch() 捕获并处理请求过程中的错误。

使用 XMLHttpRequest 对象发起请求

XMLHttpRequest 对象是更传统的 JavaScript 发起 HTTP 请求的方式，提供了对请求的更细粒度控制。

var xhr = new XMLHttpRequest();
xhr.open('GET', url, true); // 可选：'POST', 'PUT', 'DELETE' 等
xhr.setRequestHeader('Content-Type', 'application/json'); // 根据请求内容调整
// 可选：添加授权信息
// xhr.setRequestHeader('Authorization', 'Bearer yourAuthToken');

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    // 处理响应数据
    console.log(data);
  } else if (xhr.readyState === 4) {
    // 处理请求错误
    console.error('请求出错：', xhr.status);
  }
};

// 可选：发送请求体 (例如 POST 请求)
// xhr.send(JSON.stringify({ key: 'value' })); 
// 否则，直接发送请求
xhr.send(); 

代码解析:

1. 创建 XMLHttpRequest 对象实例。
2. 使用 open(method, url, async) 方法初始化请求，method 是 HTTP 方法，url 是目标服务器地址，async 指定是否异步执行请求 (默认为 true)。
3. 使用 setRequestHeader(header, value) 方法设置请求头。
4. 监听 onreadystatechange 事件，根据 readyState 和 status 属性判断请求状态并处理响应数据或错误。
5. 使用 send(body) 方法发送请求，body 是可选的请求体数据。

选择适合你的方法

• 如果你需要更简洁、更现代的 API，并且主要处理 JSON 数据，那么 fetch 函数是更佳选择。
• 如果你需要更精细地控制请求，或者需要兼容旧版浏览器，那么 XMLHttpRequest 对象更合适。

希望本指南帮助你掌握了使用 JavaScript 发起 HTTP 请求的基本方法。请根据你的具体需求选择合适的方法，并根据实际情况调整代码。 Happy coding!