跟 PronHub 学 Web前端!更好的 fetch 请求
yuyutoo 2024-10-15 16:51 1 浏览 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 密切相关，所以在面试中出现的频率非常高，是必须掌握的知识点。
你的点赞转发，是我创作的动力。欢迎评论区讨论，留言必回。
相关推荐
- MySQL5.5+配置主从同步并结合ThinkPHP5设置分布式数据库
-
前言：本文章是在同处局域网内的两台windows电脑，且MySQL是5.5以上版本下进行的一主多从同步配置，并且使用的是集成环境工具PHPStudy为例。最后就是ThinkPHP5的分布式的连接，读写...
- thinkphp5多语言怎么切换（thinkphp5.1视频教程）
-
thinkphp5多语言进行切换的步骤：第一步，在配置文件中开启多语言配置。第二步，创建多语言目录。相关推荐：《ThinkPHP教程》第三步，编写语言包。视图代码：控制器代码：效果如下：以上就是thi...
- 基于 ThinkPHP5 + Bootstrap 的后台开发框架 FastAdmin
-
FastAdmin是一款基于ThinkPHP5+Bootstrap的极速后台开发框架。主要特性基于Auth验证的权限管理系统支持无限级父子级权限继承，父级的管理员可任意增删改子级管理员及权限设置支持单...
- Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示
-
本文实例讲述了Thinkphp5.0框架实现控制器向视图view赋值及视图view取值操作。分享给大家供大家参考，具体如下：Thinkphp5.0控制器向视图view的赋值方式一（使用fetch()方...
- thinkphp5实现简单评论回复功能（php评论回复功能源码下载）
-
由于之前写评论回复都是使用第三方插件：畅言所以也就没什么动手，现在证号在开发一个小的项目，所以就自己动手写评论回复，没写过还真不知道评论回复功能听着简单，但仔细研究起来却无法自拔，由于用户量少，所以...
- ThinkPHP框架——实现定时任务，定时更新、清理数据
-
大家好，我是小蜗牛，今天给大家分享一下，如何用ThinkPHP5.1.*版本实现定时任务，例如凌晨12点更新数据、每隔10秒检测过期会员、每隔几分钟发送请求保证ip的活性等本次分享，主要用到一个名为E...
- BeyongCms系统基于ThinkPHP5.1框架的轻量级内容管理系统
-
BeyongCms内容管理系统(简称BeyongCms)BeyongCms系统基于ThinkPHP5.1框架的轻量级内容管理系统，适用于企业Cms,个人站长等，针对移动App、小程序优化；提供完善简...
- YimaoAdminv3企业建站系统，使用 thinkphp5.1.27 + mysql 开发
-
介绍YimaoAdminv3.0.0企业建站系统，使用thinkphp5.1.27+mysql开发。php要求5.6以上版本，推荐使用5.6,7.0,7.1，扩展(curl,...
- ThinkAdmin-V5开发笔记（thinkpad做开发）
-
前言为了快速开发一款小程序管理后台，在众多的php开源后台中，最终选择了基于thinkphp5的，轻量级的thinkadmin系统，进行二次开发。该系统支持php7。文档地址ThinkAdmin-V5...
- thinkphp5.0.9预处理导致的sql注入复现与详细分析
-
复现先搭建thinkphp5.0.9环境...
- thinkphp5出现500错误怎么办（thinkphp页面错误）
-
thinkphp5出现500错误，如下图所示：相关推荐：《ThinkPHP教程》require():open_basedirrestrictionineffect.File(/home/ww...
- Thinkphp5.0极速搭建restful风格接口层
-
下面是基于ThinkPHPV5.0RC4框架，以restful风格完成的新闻查询（get）、新闻增加（post）、新闻修改（put）、新闻删除（delete）等server接口层。1、下载Thin...
- 基于ThinkPHP5.1.34 LTS开发的快速开发框架DolphinPHP
-
DophinPHP（海豚PHP）是一个基于ThinkPHP5.1.34LTS开发的一套开源PHP快速开发框架，DophinPHP秉承极简、极速、极致的开发理念，为开发集成了基于数据-角色的权限管理机...
- ThinkPHP5.*远程代码执行高危漏洞手工与升级修复解决方法
-
漏洞描述由于ThinkPHP5框架对控制器名没有进行足够的安全检测，导致在没有开启强制路由的情况下，黑客构造特定的请求，可直接GetWebShell。漏洞评级严重影响版本ThinkPHP5.0系列...
- Thinkphp5代码执行学习（thinkphp 教程）
-
Thinkphp5代码执行学习缓存类RCE版本5.0.0<=ThinkPHP5<=5.0.10Tp框架搭建环境搭建测试payload...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- MySQL5.5+配置主从同步并结合ThinkPHP5设置分布式数据库
- thinkphp5多语言怎么切换（thinkphp5.1视频教程）
- 基于 ThinkPHP5 + Bootstrap 的后台开发框架 FastAdmin
- Thinkphp5.0 框架实现控制器向视图view赋值及视图view取值操作示
- thinkphp5实现简单评论回复功能（php评论回复功能源码下载）
- ThinkPHP框架——实现定时任务，定时更新、清理数据
- BeyongCms系统基于ThinkPHP5.1框架的轻量级内容管理系统
- YimaoAdminv3企业建站系统，使用 thinkphp5.1.27 + mysql 开发
- ThinkAdmin-V5开发笔记（thinkpad做开发）
- thinkphp5.0.9预处理导致的sql注入复现与详细分析
- 标签列表
-
- 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)