红宝书第十九讲：详解JavaScript的Fetch API与Ajax请求

资料取自《JavaScript高级程序设计（第5版）》。
查看总目录：红宝书学习大纲

一、基本概念：为什么需要Fetch？

Fetch API是浏览器提供的现代网络请求工具，替代传统的Ajax（XMLHttpRequest）。核心特点：

基于Promise → 代码更简洁（告别回调函数嵌套） ¹²
支持流式处理 → 大文件分块传输时不卡死页面 [^6]
灵活配置请求头/请求方法 → 适配各种API需求 ³⁴

示例1：发送最简单的GET请求

// 请求JSON数据并解析
fetch('https://api.example.com/data')
  .then(response => response.json()) // 解析为JSON → 返回新Promise
  .then(data => console.log('获取的数据:', data))
  .catch(error => console.error('请求失败:', error));

¹: 资料1指出fetch()唯一必传参数是资源URL
⁵: 资料5说明Fetch返回Promise并统一处理响应

二、配置请求：POST请求与自定义参数

通过第二个参数传入配置对象，设置方法、请求头、请求体等 ³⁴。

示例2：发送带JSON数据的POST请求

const userData = {
   
    name: '小明', age: 18 };

fetch('h