当前位置：首页 > news >正文

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

news 2025/4/2 7:21:21

红宝书第十九讲：详解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('https://api.example.com/submit', {method: 'POST',headers: {'Content-Type': 'application/json' // 告诉服务器发送的是JSON},body: JSON.stringify(userData) // 将对象转为JSON字符串
}).then(response => response.text()).then(text => console.log('服务器响应:', text));

³: 资料3展示如何发送JSON和表单数据
⁴: 资料4提供Request对象的配置示例

三、处理不同类型响应

Fetch返回的Response对象提供多种解析方法：⁵

.json() → 解析为JSON对象
.text() → 解析为纯文本
.blob() → 解析为二进制数据（如图片）

示例3：下载并显示图片

fetch('https://example.com/image.png').then(response => response.blob()).then(blob => {const img = document.createElement('img');img.src = URL.createObjectURL(blob);document.body.appendChild(img);});

四、错误处理：网络错误≠HTTP错误

需要两步处理错误：

网络层错误（如断网） → 自动触发.catch()
HTTP错误状态码（如404/500） → 需手动检查响应状态

示例4：完整的错误处理

fetch('https://api.example.com/404-page').then(response => {if (!response.ok) { // 检查HTTP状态码是否成功（200-299）throw new Error(`HTTP错误! 状态码: ${response.status}`);}return response.json();}).then(data => console.log(data)).catch(error => console.error('错误信息:', error)); // 处理所有错误

⁵: 资料5强调需手动检查response.ok

五、跨域请求（CORS）的配置

浏览器默认阻止跨域请求，需设置服务端响应头允许，或配置请求的mode¹⁴：

// 允许跨域请求（需服务器支持）
fetch('https://another-domain.com/data', {mode: 'cors', // 默认值，可选 'no-cors'等headers: {'Authorization': 'Bearer token123' // 认证令牌}
});

六、高级用法：上传文件

示例5：通过FormData上传文件

<input type="file" id="fileInput">

const fileInput = document.querySelector('#fileInput');
const formData = new FormData();
formData.append('file', fileInput.files[0]); // 添加文件fetch('https://api.example.com/upload', {method: 'POST',body: formData // 自动设置正确的Content-Type
}).then(response => response.json()).then(result => console.log('上传成功:', result));