跟 PronHub 学 Web前端!更好的 fetch 请求
yuyutoo 2024-10-15 16:51 5 浏览 0 评论
PronHub Web 前端技术分享
跟P站学 Web 前端！画中画技术实现
跟P站学 Web 前端！fetch 获取下载进度
跟P站学 Web 前端！使用 picture 标签展示图片
跟P站学 Web 前端！如何知道广告被 ADBlock 拦截
前文提到：
P站认为 Fetch 不能跟踪下载进度，也没有提供拦截请求的方法，所以希望 Fetch 这个 API 能够改进。
经过文章讨论后，我们知道 fetch 是可以获取下载进度。但确实如P站所说，这个 Web API 有很大改善的空间。
文本将讨论 fetch 的相关细节，希望大家阅读后，能更加了解 fetch。包括：
- fetch 的易用性
- fetch 的使用优化
- fetch 的缺陷
fetch 的易用性
很多朋友会将 fetch 和 axios 进行比较，得出 fetch 仍然不够好用的结论。
但我认为，如果比较易用性，fetch 应该对比的是基于XHR（XMLHttpRequest）的 ajax。
上面代码可以看出，fetch 比原生 ajax 优雅不少。
如果拿 fetch 和 axios 作对比，无异于拿原生 ajax 和 axios 对比一样。未封装的底层 API 和封装好的包，在易用性上没有对比可言。
fetch 使用优化
在项目上，经常会对异常情况进行统一处理。
fetch 是基于 Promise，而它在网络、服务器出现错误使 reject，而对正常返回的请求，无论其状态码是 404 或 200，均会执行 resolve 的逻辑。
但实际项目上，我们一般对网络错误、服务器错误、后台找不到资源报 404、权限不足报 500 等，都执行同一种处理逻辑。
所以我们需要对 fetch 进行改造。
优化后的 fetch 流程，更加符合业务逻辑。
fetch 的缺陷
fetch 虽然作为“新出”的 API，但是却没得到开发者的普遍认同，原因有几点：
- 仅靠偏底层的原生 fetch，在易用性上，是无法和 axios 抗衡。
- fetch 的兼容性没 XHR 好。
- fetch 作为“新出”的 Web API，但是它并不是 XHR 的超集，部分 XHR 能提供的功能，例如跟踪上传进度，fetch 并不具备。
特别是第三点制约了 fetch。易用性，语法简单等都能通过封装完善，但是功能上的缺陷就难以修补。
fetch 的优势
虽然 fetch 的弊端不少，但是在一些场景下，还是体现出它的价值。
例如在我使用的代码转图片插件，它存在截图功能。这时候 fetch 配合 Clipboard API，就能不引入第三方包优雅地实现图片的复制。
结语
总的来说，实际项目 axios 更加适合，毕竟它所基于的 XHR 功能齐全，兼容性好，而且它还结合 Promise 的特点，同时解决了回调地狱等问题。
但 fetch 不需要引入第三方包、语法简单优雅的优点，在某些场景非常适合。
由于 fetch 和 Promise 密切相关，所以在面试中出现的频率非常高，是必须掌握的知识点。
你的点赞转发，是我创作的动力。欢迎评论区讨论，留言必回。
相关推荐
- Python操作Word文档神器:python-docx库从入门到精通
-
Python操作Word文档神器：python-docx库从入门到精通动动小手，点击关注...
- Python 函数调用从入门到精通:超详细定义解析与实战指南 附案例
-
一、函数基础：定义与调用的核心逻辑定义：函数是将重复或相关的代码块封装成可复用的单元，通过函数名和参数实现特定功能。它是Python模块化编程的基础，能提高代码复用性和可读性。定义语法：...
- 等这么长时间Python背记手册终于来了，入门到精通(视频400集)
-
本文毫无套路！真诚分享！前言：无论是学习任何一门语言，基础知识一定要扎实，基础功非常的重要，找一个有丰富编程经验的老师或者师兄带着你会少走很多弯路，你的进步速度也会快很多，无论我们学习的目的是什么，...
- 图解Python编程:从入门到精通系列教程(附全套速查表)
-
引言本系列教程展开讲解Python编程语言，Python是一门开源免费、通用型的脚本编程语言，它上手简单，功能强大，它也是互联网最热门的编程语言之一。Python生态丰富，库（模块）极其丰富，这使...
- Python入门教程(非常详细)从零基础入门到精通，看完这一篇就够
-
本书是Python经典实例解析，采用基于实例的方法编写，每个实例都会解决具体的问题和难题。主要内容有：数字、字符串和元组，语句与语法，函数定义，列表、集、字典，用户输入和输出等内置数据结构，类和对象，...
- Python函数全解析:从入门到精通，一文搞定!
-
1.为什么要用函数？函数的作用：封装代码，提高复用性，减少重复，提高可读性。...
- Python中的单例模式:从入门到精通
-
Python中的单例模式：从入门到精通引言单例模式是一种常用的软件设计模式，它保证了一个类只有一个实例，并提供一个全局访问点。这种模式通常用于那些需要频繁创建和销毁的对象，比如日志对象、线程池、缓存等...
- 【Python王者归来】手把手教你，Python从入门到精通!
-
用800个程序实例、5万行代码手把手教你，Python从入门到精通！...
- Python从零基础入门到精通:一个月就够了
-
如果想从零基础到入门，能够全职学习（自学），那么一个月足够了。...
- Python 从入门到精通:一个月就够了
-
要知道，一个月是一段很长的时间。如果每天坚持用6-7小时来做一件事，你会有意想不到的收获。作为初学者，第一个月的月目标应该是这样的：熟悉基本概念（变量，条件，列表，循环，函数）练习超过30个编...
- Python零基础到精通，这8个入门技巧让你少走弯路，7天速通编程!
-
Python学习就像玩积木，从最基础的块开始，一步步搭建出复杂的作品。我记得刚开始学Python时也是一头雾水，走了不少弯路。现在回头看，其实掌握几个核心概念，就能快速入门这门编程语言。来聊聊怎么用最...
- 神仙级python入门教程(非常详细)，从0到精通，从看这篇开始!
-
python入门虽然简单，很多新手依然卡在基础安装阶段，大部分教程对一些基础内容都是一带而过，好多新手朋友，对一些基础知识常常一知半解，需要在网上查询很久。...
- Python类从入门到精通，一篇就够!
-
一、Python类是什么？大家在生活中应该都见过汽车吧，每一辆真实存在、能在路上跑的汽车，都可以看作是一个“对象”。那这些汽车是怎么生产出来的呢？其实，在生产之前，汽车公司都会先设计一个详细的蓝图...
- 学习Python从入门到精通:30天足够了，这才是python基础的天花板
-
当年2w买的全套python教程用不着了，现在送给有缘人，不要钱，一个月教你从入门到精通1、本套视频共487集,本套视频共分4季...
- 30天Python 入门到精通（3天学会python）
-
以下是一个为期30天的Python入门到精通学习课程，专为零基础新手设计。课程从基础语法开始，逐步深入到面向对象编程、数据处理，最后实现运行简单的大语言模型（如基于HuggingFace...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)