百度360必应搜狗淘宝本站头条
vba高级教程svn连接scheduledtaskmybatis plus结构体数组
当前位置：网站首页 > 编程网 > 正文

跟 PronHub 学 Web前端!更好的 fetch 请求

yuyutoo 2024-10-15 16:51 3 浏览 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，但是却没得到开发者的普遍认同，原因有几点：

  1. 仅靠偏底层的原生 fetch，在易用性上，是无法和 axios 抗衡。
  2. fetch 的兼容性没 XHR 好。
  3. fetch 作为“新出”的 Web API，但是它并不是 XHR 的超集，部分 XHR 能提供的功能，例如跟踪上传进度，fetch 并不具备。

特别是第三点制约了 fetch。易用性，语法简单等都能通过封装完善，但是功能上的缺陷就难以修补。

fetch 的优势

虽然 fetch 的弊端不少，但是在一些场景下，还是体现出它的价值。

例如在我使用的代码转图片插件，它存在截图功能。这时候 fetch 配合 Clipboard API，就能不引入第三方包优雅地实现图片的复制。

结语

总的来说，实际项目 axios 更加适合，毕竟它所基于的 XHR 功能齐全，兼容性好，而且它还结合 Promise 的特点，同时解决了回调地狱等问题。

但 fetch 不需要引入第三方包、语法简单优雅的优点，在某些场景非常适合。

由于 fetch 和 Promise 密切相关，所以在面试中出现的频率非常高，是必须掌握的知识点。

你的点赞转发，是我创作的动力。欢迎评论区讨论，留言必回。

相关推荐

Mysql和Oracle实现序列自增（oracle创建序列的sql）

Mysql和Oracle实现序列自增/*ORACLE设置自增序列oracle本身不支持如mysql的AUTO_INCREMENT自增方式，我们可以用序列加触发器的形式实现，假如有一个表T_WORKM...

关于Oracle数据库12c 新特性总结（oracle数据库19c与12c）

概述今天主要简单介绍一下Oracle12c的一些新特性，仅供参考。参考：http://docs.oracle.com/database/121/NEWFT/chapter12102.htm#NEWFT...

MySQL CREATE TABLE 简单设计模板交流

推荐用MySQL8.0(2018/4/19发布,开发者说同比5.7快2倍)或同类型以上版本....

mysql学习9:创建数据库（mysql5.5创建数据库）

前言：我也是在学习过程中，不对的地方请谅解showdatabases;#查看数据库表createdatabasename...

MySQL面试题-CREATE TABLE AS 与CREATE TABLE LIKE的区别

执行"CREATETABLE新表ASSELECT*FROM原表;"后，新表与原表的字段一致，但主键、索引不会复制到新表，会把原表的表记录复制到新表。...

Nike Dunk High Volt 和 Bright Spruce 预计将于 12 月推出

在街上看到的PandaDunk的超载可能让一些球鞋迷们望而却步，但Dunk的浪潮仍然强劲，看不到尽头。我们看到的很多版本都是为女性和儿童制作的，这种新配色为后者引入了一种令人耳目一新的新选择，而...

美国多功能舰载雷达及美国海军舰载多功能雷达系统技术介绍

多功能雷达AN/SPY-1的特性和技术能力，该雷达已经在美国海军服役了30多年，其修改-AN/SPY-1A、AN/SPY-1B（V）、AN/SPY-1D、AN/SPY-1D（V），以及雷神...

汽车音响怎么玩，安装技术知识（汽车音响怎么玩,安装技术知识视频）

全面分析汽车音响使用或安装技术常识一:主机是大多数人最熟习的音响器材，有关主机的各种性能及规格，也是耳熟能详的事，以下是一些在使用或安装时，比较需要注意的事项：LOUDNESS：几年前的主机，此按...

【推荐】ProAc Response系列扬声器逐个看

有考牌(公认好声音)扬声器之称ProAcTablette小音箱，相信不少音响发烧友都曾经，或者现在依然持有，正当大家逐渐掌握Tablette的摆位设定与器材配搭之后，下一步就会考虑升级至表现更全...

#本站首晒# 漂洋过海来看你 — BLACK&DECKER 百得 BDH2000L无绳吸尘器 开箱

作者：初吻给了烟sco混迹张大妈时日不短了，手没少剁。家里有了汪星人，吸尘器使用频率相当高，偶尔零星打扫用卧式的实在麻烦（汪星人：你这分明是找借口，我掉毛是满屋子都有，铲屎君都是用卧式满屋子吸的，你...

专题|一个品牌一件产品(英国篇)之Quested(罗杰之声)

Quested(罗杰之声)代表产品：Q212FS品牌介绍Quested(罗杰之声)是录音监听领域的传奇品牌，由英国录音师RogerQuested于1985年创立。在成立Quested之前，Roger...

常用半导体中英对照表(建议收藏)（半导体英文术语）

作为一个源自国外的技术，半导体产业涉及许多英文术语。加之从业者很多都有海外经历或习惯于用英文表达相关技术和工艺节点，这就导致许多英文术语翻译成中文后，仍有不少人照应不上或不知如何翻译。为此，我们整理了...

Fyne Audio F502SP 2.5音路低音反射式落地音箱评测

FyneAudio的F500系列，有新成员了！不过，新成员不是新的款式，却是根据原有款式提出特别版。特别版产品在原有型号后标注了SP字样，意思是SpecialProduction。Fyne一共推出...

有哪些免费的内存数据库(In-Memory Database)

以下是一些常见的免费的内存数据库：1.Redis：Redis是一个开源的内存数据库，它支持多种数据结构，如字符串、哈希表、列表、集合和有序集合。Redis提供了快速的读写操作，并且支持持久化数据到磁...

RazorSQL Mac版(SQL数据库查询工具)

RazorSQLMac特别版是一款看似简单实则功能非常出色的SQL数据库查询、编辑、浏览和管理工具。RazorSQLformac特别版可以帮你管理多个数据库，支持主流的30多种数据库，包括Ca...

取消回复欢迎 你 发表评论:

一周热门
最近发表
标签列表