基于 JavaScript 装饰器的网络请求库 retrofit-cjs

MIT
JavaScript
跨平台
2018-08-16
萌宠兔子

retrofit-cjs 是一个基于 JavaScript 装饰器(Decorator)和 axios 实现的网络请求库, 支持 Vue / React / react-native 等常用框架, 支持node.js 。

使用方法

1. 安装

npm i retrofit-cjs --save

Babel 转码器的支持安装 babel-plugin-transform-decorators-legacy

npm i babel-plugin-transform-decorators-legacy -Dnpm i babel-plugin-transform-decorators-leg

配置 .babelrc 文件

"plugins": ["transform-decorators-legacy"]

如果是使用 create-react-app 创建的项目,需要先弹出 webpack 配置

npm run eject

安装 babel-plugin-transform-decorators-legacy,在 package.json 中配置 babel

"babel": {
    "presets": [
        "react-app"
    ],
    "plugins": [
        "transform-decorators-legacy"
    ]
  }

vue-cli3 已默认支持 Decorator。

2. 引入 retrofit-cjs

import { GET, POST, Headers } from 'retrofit-cjs';

修饰器

属性方法修饰器

类修饰器

  • @Create

    • 创建新的请求实例,后续其他操作都依赖与创建的实例,默认使用全局的请求实例。可配置请求基础信息,也可通过 @Config 和 @Headers 完成基础信息配置

  • @Config

    • 配置全局请求信息,若使用了 @Create 则作用与当前请求对象,否则作用与全局对象

  • @Headers

    • 配置全局请求头信息,若使用了 @Create 则作用与当前请求对象,否则作用与全局对象

  • @AddReqInterceptor 添加请求拦截器

  • @AddResInterceptor 添加响应拦截器

一些工具修饰器

  • @Debounce 防抖

        @Debounce(1000) // 1秒防抖
        @Debounce(1000, true) // 1秒防抖, 立即执行

  • @Throttle 节流

        @Throttle(1000, {leading: false}) // 忽略开始函数的的调用
        @Throttle(1000, {trailing: false}) // 忽略结尾函数的调用
  • @Timer 定时操作

        @Timer(1000) // 延迟1秒执行
        @Timer(1000, true) // 延迟1秒执行, 立即执行修饰函数

  • @Interval 定时操作

        @Interval(1000) // 每隔1秒执行一次
        @Interval(1000, true) // 每隔1秒执行一次, 立即执行修饰函数

  • @Autobind 自动绑定方法(到当前对象)

  • @RetroPlugin Vue 插件:全局配置网络请求

3. 使用

1.推荐用法

@AddResInterceptor((res)=>{
    // response result
    return res;
}, (error)=>{
    // response error
})
@Config({timeout: 2000})
@Header({'User-Agent': 'request'})
@Create({
    baseURL: 'https://cnodejs.org/api',
    timeout: 1000,
    headers: {
        'X-Custom-Header': 'foobar'
    }
})
class TopicApi{
    static getInstance(){
        return new TopicApi();
    }

    @Cancel((cancel) => {
        // cancel();
    })
    @Config({timeout: 1000})
    @Header({'User-Agent': 'request'})
    @GET('/v1/topics')
    // @GET('/v1/{0}', 'topics')
    // @GET('https://cnodejs.org/api/v1/topics')
    // @GET({url: '/v1/topics', params: {limit: 10}})
    getTopicList(res){
        // 处理结果
        return res;
    }

    @Debounce(2000)
    // @HTTP({
    //     url: '/v1/topic/5433d5e4e737cbe96dcef312',
    //     method: 'get',
    //     params: {}
    // })
    @GET('/v1/topic/{topicId}')
    getTopicDetails(res){
        // response result
    }

    // 以表单方式提交数据
    @FormUrlEncoded
    @POST('/user')
    // @POST({url: '/user', data: {id: 1, name: 'glang'}})
    addUser(res) {

    }
}

let topicApi = TopicApi.getInstance();
// topicApi.getTopicDetails('topicId=5433d5e4e737cbe96dcef312', {
//     limit: 20
// });
// 参数会按 {} 自动匹配
topicApi.getTopicDetails({
    topicId: '5433d5e4e737cbe96dcef312',
    limit: 20
});
topicApi.addUser({id: 1, name: 'glang'});

2.react / react-native

import {Interval, Autobind} from './lib/utils';

@Create({
    baseURL: 'https://cnodejs.org/api'
})
class App extends Component{
    constructor(props) {
        super(props);
        // this.countdwon = this.countdwon.bind(this);
    }

    @GET('/v1/topics')
    getTopicList(res){
        // 处理结果
        
    }

    @Autobind
    @Interval(1000, 60 * 1000)
    countdwon(){

    }
}

3.vue

export default {
  name: "app",
  mounted() {
    this.getList();
  },
  methods: {
    // @Config 只影响当前网络请求
    @Config({
        baseURL: 'https://cnodejs.org/api',
        timeout: 1000 
    })
    @GET("/v1/topics")
    getList(res, err) {
        //
    }
  }
}

@RetroPlugin

使用Vue插件配置请求基本信息

// 入口文件
import Vue from 'vue'
import {RetroPlugin} from './lib/utils';

Vue.use(RetroPlugin, {
    baseURL: 'https://cnodejs.org/api',
    timeout: 1000,
    headers: {
        'X-Custom-Header': 'foobar'
    }
});

@AddReqInterceptor

@AddReqInterceptor((request)=>{
    request.transformRequest = [function (data) {
        let ret = ''
        for (let it in data) {
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
        }
        return ret
    }]
    return request;
})
class TopicApi{
    ...
}
的码云指数为
超过 的项目
加载中

评论(0)

暂无评论

暂无资讯

暂无问答

npm 错误

brew upgrade 导致 npm 错误(首次巧遇) MickeyMacBook-Pro:app mickey$ npm internal/modules/cjs/loader.js:583 throw err; ^ Error: Cannot find module '../lib/utils/unsupported.js' ...

2018/09/14 23:47
492
0
express报错Error: listen EADDRINUSE

express报错Error: listen EADDRINUSE $ node client.js events.js:167 throw er; // Unhandled 'error' event ^ Error: listen EADDRINUSE :::3000 at Server.setupListenHandle [as _list...

2018/11/14 09:28
18
0
Retrofit2 简明教程(一)

Retrofit2 简明教程(一) 相信大家都听过Retrofit的大名但是没有实际运用,或是已经运用过Retrofit1.x,因为Retrofit1.x和Retrofit2.x差别非常大,Retrofit1.x教程也是非常多,为了简单易懂...

2016/06/22 22:10
177
0
Retrofit2使用方式和源码解析

简单介绍 Retrofit是一套RESTful架构的Android(Java)客户端实现,基于注解,提供JSON to POJO(Plain Ordinary Java Object,简单Java对象),POJO to JSON,网络请求(POST,GET,PUT,DELETE等)...

2016/06/17 23:24
25
0
Rxjava+Retrofit使用记录

Rxjava+Retrofit使用记录

2016/08/31 15:22
26
0
你真的会用Retrofit2吗?Retrofit2完全教程

作者: @怪盗kidou 如需转载需在明显位置保留作者信息及原文链接 Retrofit版本: 2.0.2

2016/12/27 18:19
97
0
Retrofit设计模式源码解析

因为Retrofit做到了很强的解耦,因此就一定需要用到很多设计模式。所以,我觉得,通过阅读Retrofit源码来学习设计模式是再好不过的设计模式学习方法了。 大致看了一圈Retrofit源码,受益匪浅...

01/16 15:28
14
0
Android Retrofit介绍

一、Retrofit简介 Retrofit是Square公司开发的一个类型安全的Java和Android 的REST客户端库,这个库为网络认证、API请求以及用OkHttp发送网络请求提供了强大的框架 。Retrofit 库使得从web a...

2016/03/30 21:48
487
1
android 介绍Retrofit的简单使用

Retrofit与okhttp共同出自于Square公司,retrofit就是对okhttp做了一层封装。把网络请求都交给给了Okhttp,我们只需要通过简单的配置就能使用retrofit来进行网络请求了,其主要作者是Android...

2016/11/13 15:56
144
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部