使用 js 修饰器封装 axios
修饰器
修饰器是一个 JavaScript 函数(建议是纯函数),它用于修改类属性/方法或类本身。修饰器提案正处于第二阶段,我们可以使用 babel-plugin-transform-decorators-legacy 这个 Babel 插件来转换它。
类修饰器
@Dec
class Topic{
}
function Dec(target){
target.type = 'Topic'; // 类的静态属性
target.prototype.type = 'topic object'; //类的实例属性
}
var topic = new Topic();
console.log(Topic.type); // Topic
console.log(topic.type); // topic object
修饰器是一个对类进行处理的函数。类修饰器函数的第一个参数,就是所要修饰的目标类。
函数Dec的参数target,就是被修饰的类。如果要在类的实例上添加属性可通过 target.prototype。
如果要通过修饰器传递参数可在修饰器外面封装一层(多层)函数。
function Decs(type){
return target => {
target.type = 'Topic' + type;
target.prototype.type = 'topic ' + type;
}
}
注意: 修饰器对类的行为的改变,是代码编译时发生的,而不是在运行时。这意味着,修饰器能在编译阶段运行代码。也就是说,修饰器本质就是编译时执行的函数
看一个例子,通过类修饰器给 React 组件添加 axios 实例:
//App.js
@Create({
baseURL: 'https:xxx.xxx.xxx',
})
class App extends Component{
constructor(props) {
super(props);
}
componentWillMount() {
this.$axios.get('/user?ID=12345');
}
}
// Create修饰器
const Create = config => (target, property, descriptor) => {
// 避免在类的方法上使用
if (!descriptor) {
target.prototype.$axios = axios.create(config);
}
}
类方法修饰器
class App extends Component{
constructor(props) {
super(props);
}
@GET('/user?ID=12345')
getUser(res) {
//
}
}
// axios get请求简单封装
function GET(url){
return function(target, name, descriptor) {
let oldVal = descriptor.value;
// descriptor.value为当前修饰器所修饰的属性值
descriptor.value = function(){
axios.get(url)
.then((res)=>{
oldVal.apply(this, res.data);
}).catch((err)=>{
oldVal.apply(this, {}, err)
});
}
}
}
类方法的修饰器函数一共可以接受三个参数,第一个参数是类的原型对象,上例是App.prototype,修饰器的本意是要“修饰”类的实例,但是这个时候实例还没生成,所以只能去修饰原型(这不同于类的修饰,那种情况时target参数指的是类本身);第二个参数是所要修饰的属性名,第三个参数是该属性的描述对象。
最后
基于decorator(修饰器)的方便,封装了一个 axios 的网络请求库,欢迎大家来star retrofit-cjs
来源:https://segmentfault.com/a/1190000016036391
使用 js 修饰器封装 axios的更多相关文章
- Vue笔记:封装 axios 为插件使用
前言 自从Vue2.0推荐大家使用 axios 开始,axios 被越来越多的人所了解.使用axios发起一个请求对大家来说是比较简单的事情,但是axios没有进行封装复用,项目越来越大,引起的代码冗 ...
- 15、vue项目封装axios并访问接口
1.在src下新建util文件夹,在util下新建request.js文件: 封装axios: import axios from 'axios' import QS from 'qs'; // im ...
- js基石之---es7的decorator修饰器
es7的decorator修饰器 装饰器(Decorator)是一种与类(class)相关的语法,用来注释或修改类和类方法. decorator就是给类添加或修改类的变量与方法的. 装饰器是一种函数, ...
- Python 详解修饰器 附带 js使用修饰器
修饰器 功能 修饰器的主要功能是,在不改变已有代码的情况下,为某一个类,方法等扩展功能 首先看这样一段代码 def foo(): for i in range(10): print(i) foo() ...
- ES2017中的修饰器Decorator
前面的话 修饰器(Decorator)是一个函数,用来修改类的行为.本文将详细介绍ES2017中的修饰器Decorator 概述 ES2017 引入了这项功能,目前 Babel 转码器已经支持Deco ...
- 封装axios
import axios from 'axios' // import store from '@/vuex/store.js' import router from '../router' impo ...
- 19.Decorator修饰器
Decorator 修饰器 类的修饰 许多面向对象的语言都有修饰器(Decorator)函数,用来修改类的行为.目前,有一个提案将这项功能,引入了 ECMAScript. @testable clas ...
- 修饰器Decorator
类的修饰 许多面向对象的语言都有修饰器(Decorator)函数,用来修改类的行为.目前,有一个提案将这项功能,引入了 ECMAScript. @testable class MyTestableCl ...
- ES6里的修饰器Decorator
修饰器(Decorator)是一个函数,用来修改类的行为. 一.概述 ES6 引入了这项功能,目前 Babel 转码器已经支持Decorator 首先,安装babel-core和babel-plugi ...
随机推荐
- expect实现远程主机自动执行命令脚本
2014年第一个脚本,哈哈!!! expect实现远程主机自动执行命令脚本: #!/usr/bin/expect -- if { [llength $argv] < 4 } { puts &qu ...
- 【UOJ#400】暴力写挂
题目链接 题意 两棵树 , 求出下面式子的最大值. \[dep[u]+dep[v]-dep[LCA(u,v)]-dep'[LCA'(u,v)]\] Sol 边分治. 与第一棵树有关的信息比较多,所以对 ...
- day04记
useGeneratedKeys useGeneratedKeys这个只在insert语句中有效,正常情况下useGeneratedKeys默认为false 当useGeneratedKeys为tru ...
- 关于softmax稳定性问题
因为softmax中指数函数,很容易超出计算机表达的最大值,所以采用分子分母同时乘N的方法,N一般为最大值.
- mybaits 时间查询DATE_FORMAT
<if test="accountdayInout.inoutDateStart!=null"> and DATE_FORMAT(t.inout_date,'%Y-%m ...
- spring mvc 数据校验(bean实体注解实现)
spring mvc 数据校验 1.添加个jar (jar与一版本会冲突) <dependency> <groupId>com.fasterxml</groupId> ...
- BZOJ 3887: [Usaco2015 Jan]Grass Cownoisseur tarjan + spfa
Code: #include <bits/stdc++.h> #define setIO(s) freopen(s".in","r",stdin) ...
- PC端无论页面有没有完全撑开把footer保持在最底部(不用定位)
最近在写项目,有的页面没有占到一屏,然后footer也就是底部就靠上了,这样很影响美观,于是在网上找了找,下面是我的成果 解决该问题的最好方法是采用CSS3提供的一种先进布局模型 :flexbox,可 ...
- BZOJ 4939: [Ynoi2016]掉进兔子洞(莫队+bitset)
传送门 解题思路 刚开始想到了莫队+\(bitset\)去维护信息,结果发现空间不太够..试了各种奇技淫巧都\(MLE\),最后\(\%\)了发题解发现似乎可以分段做..这道题做法具体来说就是开\(3 ...
- SSM+PageHelper 使用
项目中使用了maven 1 引入jar包 首先需要引入PageHelper的jar包. 如果使用了maven,那么只要在pom.xml中引入该插件即可,引入如下: <dependency> ...