使用 js 修饰器封装 axios

894974231 发布于2019-08-26 12:13 / 1947人阅读

摘要：修饰器修饰器是一个函数建议是纯函数，它用于修改类属性方法或类本身。如果要通过修饰器传递参数可在修饰器外面封装一层多层函数。这意味着，修饰器能在编译阶段运行代码。最后基于修饰器的方便，封装了一个的网络请求库，欢迎大家来

修饰器

修饰器是一个 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

云服务器 GPU云服务器修饰器 Python修饰器 python类修饰器 js封装

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108252.html

vue开发看这篇文章就够了

摘要：注意此处获取的数据是更新后的数据，但是获取页面中的元素是更新之前的钩子函数说明组件已经更新，所以你现在可以执行依赖于的操作。钩子函数说明实例销毁 Vue -渐进式JavaScript框架介绍 vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架库和框架的区别我们所说的前端框架与库的区别？ Library 库，本质上是一...

fsmStudy 2019-08-21 18:37 评论0 收藏0
Ajax 如何保证请求接口数据符合预期？如何去重？

摘要：将的，和包含全部请求参数的字符串存入管理器。如满足条件，则当前请求不需要发起。如果参数不同，或者是人为操作，则视为两个不同请求。此时取消中的，并将当前请求重新注册。如果不设置此项，则只会保留最后一次，前面的请求会被掉。先描述两个场景：快速点击分页码1.2.3.4.5...。假设网络不好或接口速度不佳，此时可能有多个pending中请求。而我们无法控制返回顺序。假如用户最后点击到分...

Darkgel 2019-08-23 17:06 评论0 收藏0
VUE知识点集锦

摘要：载入前后在阶段，实例的和都初始化了，但还是挂载之前为虚拟的节点，还未替换。类似于，不同在于提交的是，而不是直接变更状态可以包含任意异步操作。 vue基础 1、 router 路由与 a 标签的区别：https://www.jianshu.com/p/34b...2、 VUE双向绑定的原理：答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个...

Tecode 2019-08-23 16:02 评论0 收藏0
VUE知识点集锦

摘要：载入前后在阶段，实例的和都初始化了，但还是挂载之前为虚拟的节点，还未替换。类似于，不同在于提交的是，而不是直接变更状态可以包含任意异步操作。 vue基础 1、 router 路由与 a 标签的区别：https://www.jianshu.com/p/34b...2、 VUE双向绑定的原理：答：VUE实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个...

APICloud 2019-08-02 14:34 评论0 收藏0
vue培训记录

在公司做了一次vue相关的培训，自己整理了一些大纲。供大家参考学习！当然优先要先看官方文档 1. 项目构成及原理 Vue 主流框架见解及差别 react ALL IN JS 灵活 angular 架构清晰层级多重 vue 类似react并吸收了angular的一些优点 Node运行在服务端的JS 谷歌V8引擎使JS语言能在服务器端运行 Webpack—一个前端的打包工具 ...

curlyCheng 2019-08-23 16:27 评论0 收藏0