【前端网络请求入门】XMLHttpRequest与Fetch保姆级教程

news2025/4/18 23:35:27

新手学前端时，经常会被「如何让网页和服务器说话」难住。今天我们用最通俗的语言，把浏览器最常用的两种网络请求方式——XMLHttpRequest和Fetch讲清楚，还会带完整的代码示例，跟着敲一遍就能上手！

一、先搞懂「网络请求」是什么？

就像你点外卖时打电话给商家：

你告诉商家地址（请求地址）
说清楚要什么餐（请求参数）
商家做好后把外卖给你（返回数据）

浏览器和服务器通信也是一样的道理，只不过「打电话」的工具就是XHR和Fetch。

二、第一种工具：XHR（老派但可靠）

XHR是XMLHttpRequest的缩写，2000年左右就有了，虽然有点「老」，但兼容性超好，所有浏览器都支持。

1. 发送GET请求（获取数据）

就像你打电话问商家「今天有什么推荐菜」：

// 1. 创建一个"电话"对象
const xhr = new XMLHttpRequest();

// 2. 告诉"电话"要打给谁（请求地址）和用什么方式（GET）
xhr.open('GET', 'https://api.example.com/products');

// 3. 监听商家什么时候回复（响应处理）
xhr.onload = function() {
  if (xhr.status === 200) { // 200表示成功
    console.log('服务器回复了：', xhr.responseText); // 回复内容是字符串
  }
};

// 4. 拨打电话！
xhr.send();

2. 发送POST请求（提交数据）

比如你告诉商家「我要订一份宫保鸡丁，地址是XXX」：

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/orders');

// 设置请求头（告诉商家我要发JSON格式的数据）
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onload = function() {
  if (xhr.status === 201) { // 201表示创建成功
    console.log('订单提交成功！');
  }
};

// 发送的数据（转成JSON字符串）
const data = {
  product: '宫保鸡丁',
  address: 'XX路123号'
};
xhr.send(JSON.stringify(data));

XHR的缺点：

代码像「拼积木」，步骤多
处理错误要用onerror，不够直观
不支持Promise，异步处理麻烦（需要嵌套回调）

三、第二种工具：Fetch（现代派，更简洁）

Fetch是ES6推出的新API，基于Promise设计，代码更简洁优雅，是现在的主流选择。

1. 发送GET请求（用async/await更简单）

async function fetchProducts() {
  try {
    // 1. 发起请求（相当于拨号）
    const response = await fetch('https://api.example.com/products');
    
    // 2. 解析响应（商家把外卖递给你，你要打开包装）
    // 常见的解析方式：
    const jsonData = await response.json(); // 解析JSON数据
    // const textData = await response.text(); // 解析纯文本
    // const blobData = await response.blob(); // 解析二进制文件（如图像）
    
    console.log('获取到的数据：', jsonData);
  } catch (error) {
    console.error('请求失败：', error); // 网络错误会走到这里
  }
}

// 调用函数
fetchProducts();

2. 发送POST请求（带数据）

async function submitOrder() {
  try {
    const data = {
      product: '宫保鸡丁',
      address: 'XX路123号'
    };
    
    const response = await fetch('https://api.example.com/orders', {
      method: 'POST', // 请求方法
      headers: {
        'Content-Type': 'application/json', // 设置请求头
      },
      body: JSON.stringify(data), // 发送的body数据（必须是字符串或Blob）
    });
    
    if (!response.ok) { // 检查HTTP状态码（比如400错误）
      throw new Error(`HTTP错误：${response.status}`);
    }
    
    const result = await response.json();
    console.log('服务器返回：', result);
  } catch (error) {
    console.error('提交失败：', error);
  }
}

Fetch的优点：

语法更简洁，像「写人话」
天然支持Promise，用async/await处理异步更清晰
功能更强大（支持请求/响应体、流处理等）

注意！Fetch的「坑」：

网络错误才会触发catch：比如断网、域名错误。但如果服务器返回404/500等HTTP错误，不会进catch，需要手动检查response.ok
必须手动解析响应：XHR的responseText直接是字符串，Fetch需要用response.json()等方法解析
老浏览器不支持：IE浏览器完全不支持，需要加「polyfill」（兼容性补丁）

四、XHR和Fetch怎么选？

场景	推荐用XHR	推荐用Fetch
兼容性要求高	✅（所有浏览器都支持）	❌（需polyfill兼容IE）
现代项目开发	❌（代码繁琐）	✅（主流选择）
需要精确控制请求过程	✅（能监听`progress`进度）	❌（需配合AbortController）
处理复杂响应	❌（只能解析字符串）	✅（支持JSON/Blob/流等）

五、实战：用Fetch做一个「天气查询」小Demo

步骤1：HTML结构

<input type="text" id="city" placeholder="输入城市名">
<button id="search">查询天气</button>
<p id="result"></p>

<script>
  const searchBtn = document.getElementById('search');
  searchBtn.addEventListener('click', async function() {
    const city = document.getElementById('city').value;
    if (!city) return;
    
    try {
      const response = await fetch(`https://api.weather.com?city=${city}`);
      const data = await response.json();
      document.getElementById('result').textContent = `天气：${data.weather}`;
    } catch (error) {
      document.getElementById('result').textContent = '查询失败，请重试';
    }
  });
</script>