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

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

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

首先上代码:

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 实现响应的数据绑定和组合的视图组件。

    232 引用 • 652 回帖 • 393 关注
  • JavaScript

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

    694 引用 • 1142 回帖 • 609 关注
  • uni-app
    13 引用 • 5 回帖
1 操作
yaoqiwood 在 2021-04-28 19:26:20 更新了该帖

欢迎来到这里!

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

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