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

1.2 fetch详解

article 2025/8/22 11:07:52

浏览器 Fetch API 详解

Fetch API 是现代浏览器提供的用于发起网络请求的接口，它基于 Promise 实现，替代了传统的 XMLHttpRequest，提供了更强大、更灵活的功能。

1. 基本用法

使用 fetch() 函数发起请求，返回一个 Promise：

fetch('https://api.example.com/data').then(response => {if (!response.ok) {throw new Error(`HTTP error! Status: ${response.status}`);}return response.json(); // 解析为 JSON}).then(data => console.log(data)).catch(error => console.error('Fetch error:', error));

2. 请求参数

fetch() 接受第二个可选参数 init，用于配置请求：

fetch('https://api.example.com/posts', {method: 'POST',headers: {'Content-Type': 'application/json','Authorization': 'Bearer token123'},body: JSON.stringify({ title: 'New Post', content: 'Hello World' }),mode: 'cors',         // 跨域模式credentials: 'include', // 携带 cookiescache: 'no-cache',    // 缓存策略redirect: 'follow',   // 重定向处理
}).then(res => res.json()).then(data => console.log(data));

3. 响应处理

响应对象包含多种解析方法：

fetch('https://example.com/data').then(res => {res.text();         // 解析为文本res.json();         // 解析为 JSONres.blob();         // 解析为二进制文件res.arrayBuffer();  // 解析为二进制数组res.formData();     // 解析为表单数据});

4. 处理不同类型的请求

GET 请求（带查询参数）：

const query = new URLSearchParams({ page: 1, limit: 10 });
fetch(`https://api.example.com/users?${query}`);

POST 请求（表单数据）：

const formData = new FormData();
formData.append('file', fileInput.files[0]);
formData.append('name', 'example');
fetch('https://api.example.com/upload', {method: 'POST',body: formData // 无需设置 Content-Type，浏览器会自动处理
});

5. 错误处理

  • HTTP 错误（如 404、500）不会触发 catch，需手动检查 response.ok
  • 网络错误（如断网）才会触发 catch
fetch('https://nonexistent-api.com').then(res => {if (!res.ok) {throw new Error(`HTTP error! Status: ${res.status}`);}return res.json();}).catch(err => console.error('Network error:', err));

6. 中止请求

使用 AbortController 中止未完成的请求：

const controller = new AbortController();
const signal = controller.signal;fetch('https://api.example.com/large-data', { signal }).then(res => res.json()).catch(err => {if (err.name === 'AbortError') {console.log('Request aborted');}});// 5秒后中止请求
setTimeout(() => controller.abort(), 5000);

7. 自定义请求头

fetch('https://api.example.com', {headers: {'X-Custom-Header': 'value','Accept': 'application/json'}
});

8. 并发请求

使用 Promise.all 并发处理多个请求：

Promise.all([fetch('https://api.example.com/data1'),fetch('https://api.example.com/data2')
]).then(responses => Promise.all(responses.map(res => res.json()))).then(data => console.log(data));

9. 与 XMLHttpRequest 的对比

特性Fetch APIXMLHttpRequest
接口类型Promise 驱动事件驱动
语法复杂度更简洁更繁琐
流式响应处理支持（通过 body.getReader()）不支持
跨域支持原生支持 CORS需要额外配置
中止请求通过 AbortController通过 abort() 方法
进度监听需要手动实现内置 onprogress 事件

Fetch API 提供了更现代化、更优雅的方式来处理网络请求，尤其适合配合 async/await 使用：

Node.js 中，fetch API

在 Node.js 中，fetch API 从 Node.js v17.5 开始得到了原生支持，并且从 Node.js v18 开始被更广泛地推荐使用。这使得你可以在服务器端直接使用与浏览器环境中相同的 Fetch API 来发起 HTTP 请求，而无需依赖第三方库如 node-fetch 或 axios。

基本用法

fetch() 函数的基本形式如下：

fetch(resource, init)
  • resource: 要请求的资源 URL。
  • init: 可选参数，一个配置对象，用于设置请求方法、headers、body 等。

返回一个 Promise，该 Promise 解析为 Response 对象。

Response 对象

Response 对象提供了处理响应的方法，比如 .json(), .text(), .blob(), 和 .arrayBuffer() 等，这些方法都返回一个 Promise。

示例：GET 请求

下面是一个简单的例子，演示如何从 GitHub API 获取用户信息：

async function fetchGitHubUserInfo(username) {const url = `https://api.github.com/users/${username}`;try {const response = await fetch(url);if (!response.ok) {throw new Error(`HTTP error! Status: ${response.status}`);}const data = await response.json();console.log(data);} catch (error) {console.error('Error fetching GitHub user info:', error.message);}
}fetchGitHubUserInfo('octocat');

发起 POST 请求

当你需要发送数据到服务器时，可以使用 POST 方法：

async function postData(url = '', data = {}) {const response = await fetch(url, {method: 'POST',headers: {'Content-Type': 'application/json'},body: JSON.stringify(data)});return response.json(); // 解析 JSON 数据
}postData('https://jsonplaceholder.typicode.com/posts', {title: 'foo',body: 'bar',userId: 1
}).then(data => console.log(data));

使用 Headers

你可以通过 Headers 接口来创建和修改 HTTP 头部信息：

const headers = new Headers({'Authorization': 'Bearer your-token-here','Accept': 'application/json'
});fetch('https://api.example.com/data', { headers }).then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));

注意事项

  1. 错误处理: fetch() 只有在网络故障或请求被阻止的情况下才会拒绝 Promise。即使 HTTP 状态码不是成功的（如404或500），它仍然会解析成功。因此，检查 response.ok 是很重要的。

  2. Node.js 版本: 确保你的 Node.js 版本是 v17.5 或更高版本以获得对 fetch 的最佳支持。对于旧版本，你可能需要安装并使用像 node-fetch 这样的包。

  3. AbortController: 支持取消请求，可以通过 AbortController 实现。

  4. 默认行为: 默认情况下，fetch 不会在跨域请求中发送凭据（cookies）。如果需要，你可以通过设置 credentials 属性来改变这一点。

以上就是关于在 Node.js 中使用 fetch API 的基本介绍和示例。fetch 提供了一种现代且强大的方式来发出网络请求，其灵活性和易用性使其成为许多开发者首选的 HTTP 客户端解决方案。

Node.js 对 Promise 的支持历程及与浏览器的对比：

1. 支持时间线

  • ES6 (ES2015) 基础支持：
    Node.js 从 v4.0.0 (2015 年 9 月) 开始支持原生 Promise，与 ES6 标准保持一致。此时可使用 new Promise() 构造函数及基本方法（.then()、.catch()、.finally()）。

  • Promise 全局对象：
    Node.js 从 v8.0.0 (2017 年 5 月) 开始完全支持 Promise.all()、Promise.race() 等静态方法，与现代浏览器一致。

  • 内置 API 的 Promise 化：
    Node.js 在 v10.0.0 (2018 年 4 月) 引入 util.promisify，方便将回调式 API 转为 Promise 风格；
    v14.0.0 (2020 年 4 月) 后，核心模块（如 fs、child_process）全面支持 Promise 版本（如 fs/promises）。

 promise介绍 参考前端第六章 6.es新特性Promise-CSDN博客

http://www.lryc.cn/news/2402453.html

相关文章：

  • 【C#】Quartz.NET怎么动态调用方法，并且根据指定时间周期执行，动态配置类何方法以及Cron表达式，有请DeepSeek
  • 02 Deep learning神经网络的编程基础 逻辑回归--吴恩达
  • Android Native 内存泄漏检测全解析：从原理到工具的深度实践
  • React---扩展补充
  • HTML 中 class 属性介绍、用法
  • MySQL的并发事务问题及事务隔离级别
  • ProfiNet 分布式 IO 在某污水处理厂的应用
  • vue2使用笔记、vue2和vue3的区别
  • Vue2数组数字字段求和技巧 数字求和方法
  • vue2 , el-select 多选树结构，可重名
  • Excel处理控件Aspose.Cells教程：使用 C# 从 Excel 进行邮件合并
  • Jenkins | Jenkins构建成功服务进程关闭问题
  • 模块化架构下的前端调试体系建设：WebDebugX 与多工具协同的工程实践
  • EXCEL通过DAX Studio获取端口号连接PowerBI
  • PostgreSQL 技术峰会，为您打造深度交流优质平台
  • 使用 OpenCV (C++) 进行人脸边缘提取
  • C# 委托UI控件更新例子，何时需要使用委托
  • 大模型数据流处理实战：Vue+NDJSON的Markdown安全渲染架构
  • python项目如何创建docker环境
  • Eureka 高可用集群搭建实战：服务注册与发现的底层原理与避坑指南
  • PyTorch--池化层（4）
  • GPU加速与非加速的深度学习张量计算对比Demo，使用PyTorch展示关键差异
  • Vue中的自定义事件
  • 2025年大模型平台落地实践研究报告｜附75页PDF文件下载
  • PPTAGENT：让PPT生成更智能
  • Kotlin 中 companion object 扩展函数和普通函数区别
  • 《汇编语言》第13章 int指令
  • Redis实战-基于redis和lua脚本实现分布式锁以及Redission源码解析【万字长文】
  • Ubuntu崩溃修复方案
  • 计算机网络 ： 应用层自定义协议与序列化