(个人复盘向)在使用某框架时注意到关于前端 HTTP 请求拦截器的封装实现过程

本贴最后更新于 1065 天前,其中的信息可能已经沧海桑田

写在前言:大约有几个月没有写过关于分析框架部分源码的实现过程和思路的帖子,本着“做过的题如果不整理等于白做”的理念,决定抽空对使用到的拦截器进行一次复盘 由于之前并没有使用过相关的拦截器,有疏漏的地方在所难免(抽)

首先上代码:

this.$u.post('http://www.example.com', {
	id: 3,
	menu: 1
  }).then(res => {
	console.log(res);
  });

在 Vue2 工程脚手架下,this 指代 vue 对象这个大家都知道就不赘述了

那么 $u 和内部的 post 方法是如何实现的呢?

post 请求是如何在请求前,请求后对所有 http 请求进行特定代码操作?

cf949b827594eaa347eb09315ca5de4a.png

我的思路一般是这样的,在 Vue2.0 中 总会有一个 main.js 用于作为程序项目的主入口,可以初始化 vue 实例以及各类组件,所以从这里入手查找是没问题的

b3782e115a0e377fbdef764a7e97da4c.png


果然找到了 两个拦截器文件的引入 但是打开后发觉并不是我想要的关键代码

d70199b82d84412d3511ed1f51010d6f.png

这里明显仅仅对 Vue 对象的原型进行配置 那么既然说到原型了,就顺带复习下关于原型的一些知识

首先我们简单看下 W3School 上在 javascript 中 对 “prototype” 原型的简单解释

定义和用法
prototype 属性使您有能力向对象添加属性和方法。

语法
object.prototype.name=value

估计很容易让人晕头转向,我来举个很简单的栗子:

首先很多接触过一段时间的同学都会知道在 JS 中,会有一种叫做内置对象和内置方法的概念,其实也就是在 JS 这个的一些固定 API 用法和数据类型,为什么 Number 类型会有.toString() 方法呢,其实只要将某一固定数据类型进行打印

aeacad5395a311dcfd429b08ff6cd9ee.png


可以看到“__ proto __” 这个属性 其实原型就很像类 在实例化过程中 告诉当前对象 你是什么类型的对象,你会什么本领,于是这个对象就成为了一个 Number 类型的对象,这就是为什么当我们 new Date() 的时候,可以对具体的对象进行.getTime() 的操作。

所以如果想要知道 $u 是在哪里被挂载在 Vue 类的原型中,就得继续在 main.js 文件中进行查找

f48f5badade747dbdc40e5f9de949ca1.png

可以看到在 main.js 入口 uview-ui 文件夹进行了引入

于是我们继续查找

9ce0eb199c707a962132b805313ecf80.png

终于在 json 对象中找到 $u 以及下面定义的三个方法,继续向下找

53a710994b849100e5b2543a75dfa50d.png

一下子明了了起来,当然还没完 继续对当前的 http 拦截器的实现代码进行深挖

b1bdfabdf3f96a2dd624773003eef169.png

很明显了

7396cd5e7c0a425494f1a9d015e8aff6.png


总结

为了避免打广告嫌疑 就不具体写出是哪个框架了,框架的设计模式和易用程度都很好,也很值得去学习和提高,在这里感谢一下相关攻城狮。

  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    261 引用 • 662 回帖 • 2 关注
  • JavaScript

    JavaScript 一种动态类型、弱类型、基于原型的直译式脚本语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。

    710 引用 • 1173 回帖 • 193 关注
  • uni-app
    14 引用 • 6 回帖
1 操作
yaoqiwood 在 2021-04-28 19:26:20 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...

推荐标签 标签

  • RIP

    愿逝者安息!

    8 引用 • 92 回帖 • 286 关注
  • LaTeX

    LaTeX(音译“拉泰赫”)是一种基于 ΤΕΧ 的排版系统,由美国计算机学家莱斯利·兰伯特(Leslie Lamport)在 20 世纪 80 年代初期开发,利用这种格式,即使使用者没有排版和程序设计的知识也可以充分发挥由 TeX 所提供的强大功能,能在几天,甚至几小时内生成很多具有书籍质量的印刷品。对于生成复杂表格和数学公式,这一点表现得尤为突出。因此它非常适用于生成高印刷质量的科技和数学类文档。

    9 引用 • 32 回帖 • 179 关注
  • OpenShift

    红帽提供的 PaaS 云,支持多种编程语言,为开发人员提供了更为灵活的框架、存储选择。

    14 引用 • 20 回帖 • 596 关注
  • BND

    BND(Baidu Netdisk Downloader)是一款图形界面的百度网盘不限速下载器,支持 Windows、Linux 和 Mac,详细介绍请看这里

    107 引用 • 1281 回帖 • 21 关注
  • 正则表达式

    正则表达式(Regular Expression)使用单个字符串来描述、匹配一系列遵循某个句法规则的字符串。

    31 引用 • 94 回帖
  • IPFS

    IPFS(InterPlanetary File System,星际文件系统)是永久的、去中心化保存和共享文件的方法,这是一种内容可寻址、版本化、点对点超媒体的分布式协议。请浏览 IPFS 入门笔记了解更多细节。

    20 引用 • 245 回帖 • 232 关注
  • 服务

    提供一个服务绝不仅仅是简单的把硬件和软件累加在一起,它包括了服务的可靠性、服务的标准化、以及对服务的监控、维护、技术支持等。

    41 引用 • 24 回帖
  • NetBeans

    NetBeans 是一个始于 1997 年的 Xelfi 计划,本身是捷克布拉格查理大学的数学及物理学院的学生计划。此计划延伸而成立了一家公司进而发展这个商用版本的 NetBeans IDE,直到 1999 年 Sun 买下此公司。Sun 于次年(2000 年)六月将 NetBeans IDE 开源,直到现在 NetBeans 的社群依然持续增长。

    78 引用 • 102 回帖 • 636 关注
  • Swift

    Swift 是苹果于 2014 年 WWDC(苹果开发者大会)发布的开发语言,可与 Objective-C 共同运行于 Mac OS 和 iOS 平台,用于搭建基于苹果平台的应用程序。

    34 引用 • 37 回帖 • 496 关注
  • WebClipper

    Web Clipper 是一款浏览器剪藏扩展,它可以帮助你把网页内容剪藏到本地。

    3 引用 • 9 回帖 • 2 关注
  • IDEA

    IDEA 全称 IntelliJ IDEA,是一款 Java 语言开发的集成环境,在业界被公认为最好的 Java 开发工具之一。IDEA 是 JetBrains 公司的产品,这家公司总部位于捷克共和国的首都布拉格,开发人员以严谨著称的东欧程序员为主。

    180 引用 • 400 回帖
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    89 引用 • 113 回帖
  • Redis

    Redis 是一个开源的使用 ANSI C 语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value 数据库,并提供多种语言的 API。从 2010 年 3 月 15 日起,Redis 的开发工作由 VMware 主持。从 2013 年 5 月开始,Redis 的开发由 Pivotal 赞助。

    284 引用 • 247 回帖 • 212 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 17 关注
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 689 关注
  • gRpc
    10 引用 • 8 回帖 • 48 关注
  • 黑曜石

    黑曜石是一款强大的知识库工具,支持本地 Markdown 文件编辑,支持双向链接和关系图。

    A second brain, for you, forever.

    9 引用 • 83 回帖
  • 学习

    “梦想从学习开始,事业从实践起步” —— 习近平

    160 引用 • 470 回帖
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖 • 1 关注
  • 单点登录

    单点登录(Single Sign On)是目前比较流行的企业业务整合的解决方案之一。SSO 的定义是在多个应用系统中,用户只需要登录一次就可以访问所有相互信任的应用系统。

    9 引用 • 25 回帖 • 8 关注
  • Sphinx

    Sphinx 是一个基于 SQL 的全文检索引擎,可以结合 MySQL、PostgreSQL 做全文搜索,它可以提供比数据库本身更专业的搜索功能,使得应用程序更容易实现专业化的全文检索。

    1 引用 • 170 关注
  • Vue.js

    Vue.js(读音 /vju ː/,类似于 view)是一个构建数据驱动的 Web 界面库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    261 引用 • 662 回帖 • 2 关注
  • Gzip

    gzip (GNU zip)是 GNU 自由软件的文件压缩程序。我们在 Linux 中经常会用到后缀为 .gz 的文件,它们就是 Gzip 格式的。现今已经成为互联网上使用非常普遍的一种数据压缩格式,或者说一种文件格式。

    9 引用 • 12 回帖 • 105 关注
  • 链滴

    链滴是一个记录生活的地方。

    记录生活,连接点滴

    126 引用 • 3621 回帖
  • Ruby

    Ruby 是一种开源的面向对象程序设计的服务器端脚本语言,在 20 世纪 90 年代中期由日本的松本行弘(まつもとゆきひろ/Yukihiro Matsumoto)设计并开发。在 Ruby 社区,松本也被称为马茨(Matz)。

    7 引用 • 31 回帖 • 166 关注
  • GitBook

    GitBook 使您的团队可以轻松编写和维护高质量的文档。 分享知识,提高团队的工作效率,让用户满意。

    3 引用 • 8 回帖 • 1 关注
  • Node.js

    Node.js 是一个基于 Chrome JavaScript 运行时建立的平台, 用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动, 非阻塞 I/O 模型而得以轻量和高效。

    138 引用 • 268 回帖 • 219 关注