使用 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 ...
随机推荐
- web测试方法小结----以便于测试用例
今天在整理电脑的时候,发现一些之前总结过得web 测试的一些方法,以便于写测试用例.现在整理一下,就当复习一下软件测试基础. 一.输入框 1.字符型输入框: (1)字符型输入框:英文全角.英文半角.数 ...
- 关于win7虚拟机的安装
VMware 安装以及秘钥 win7的光盘文件
- hash详细介绍
转发http://www.cnblogs.com/maybe2030/p/4719267.html (请转步这个网站,写得非常好)
- 【leetcode】1095. Find in Mountain Array
题目如下: (This problem is an interactive problem.) You may recall that an array A is a mountain array i ...
- python+selenium模拟京东登录后台
python+selenium模拟京东登录后台 import json from time import sleep from selenium import webdriver #from sele ...
- 1. Spring Security 框架简介
官网:https://projects.spring.io/spring-security/Spring Security 是强大的,且容易定制的实现认证,与授权的基于 Spring 开发的框架.Sp ...
- es的索引库模板
在实际的生产中,如果要插入大批量数据的时候需要使用多个索引库,如果我们还是手工指定每个索引的配置信息settings和mappings,是非常耗时的: 针对这种情况,es有index template ...
- uniapp开发
问题1:去掉导航条 给一个单独的页面隐藏顶部的 导航栏 可以在pages.json里 单独的路由style下面配置 "app-plus": {"titleNView&q ...
- Java heap size
今天在性能诊断工作中遇到 Java heap size, 下面是它的相关的概念. 什么是Java heap size ? Java heap size 堆栈大小, 指Java 虚拟机的内存大小.我的理 ...
- 查看jQuery file upload的image preview如何工作的
查看readme中的说明, JavaScript Load Image library v. 1.13.0+: Required for the image previews and resizing ...