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

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

首先上代码：

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

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

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

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

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

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

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

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

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

语法
object.prototype.name=value

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

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

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

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

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

于是我们继续查找

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

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

很明显了

总结

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