retrofit-cjs:基于 JavaScript 装饰器和 axios 实现的网络请求库

栏目: jQuery · 发布时间: 6年前

内容简介:retrofit-cjs是一个基于JavaScript装饰器(Decorator)和 axios 实现的网络请求库, 支持Vue / React / react-native 等常用框架, 支持node.js安装 babel-plugin-transform-decorators-legacy配置 .babelrc 文件

retrofit-cjs

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 -D

配置 .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';

修饰器

属性方法修饰器

@GET('/v1/topics')
    @GET('/v1/{0}', 'topics')
    @GET('https://cnodejs.org/api/v1/topics')
    @GET({url: '/v1/topics', params: {limit: 10}})
    @GET('/v1/topic/{topicId}')
@POST({url: '/user', data: {id: 1, name: 'glang'}})

类修饰器

    • 创建新的请求实例,后续其他操作都依赖与创建的实例,默认使用全局的请求实例。可配置请求基础信息,也可通过 @Config 和 @Headers 完成基础信息配置
    • 配置全局请求信息, 若使用了 @Create 则作用与当前请求对象,否则作用与全局对象
    • 配置全局请求头信息, 若使用了 @Create 则作用与当前请求对象,否则作用与全局对象
  • 添加响应拦截器

    注意配置顺序,修饰器会从内向外执行

一些 工具 修饰器

@Debounce(1000) // 1秒防抖
    @Debounce(1000, true) // 1秒防抖, 立即执行
@Throttle(1000, {leading: false}) // 忽略开始函数的的调用
    @Throttle(1000, {trailing: false}) // 忽略结尾函数的调用
    // 两者不能共存, 否则函数不能执行
@Timer(1000) // 延迟1秒执行
    @Timer(1000, true) // 延迟1秒执行, 立即执行修饰函数
@Interval(1000) // 每隔1秒执行一次
    @Interval(1000, true) // 每隔1秒执行一次, 立即执行修饰函数
    @Interval(1000, 10000) // 每隔1秒执行一次, 10秒后结束
    @Interval(1000, 10000, true) // 每隔1秒执行一次, 10秒后结束,立即执行修饰函数

注意:在同一个方法上,@Debounce,@Throttle,@Timer,@Interval 和 @GET,@POST,@PUT,@DELETE,@HTTP是无法同时使用的

3. 使用

  1. 推荐
@AddResInterceptor((res)=>{
    // response result
    return res;
}, (error)=>{
    // response error
})
@Config({timeout: 2000})
@Headers({'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})
    @Headers({'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'});
  1. react / react-native
import {Interval} from 'retrofit-cjs';

@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){
        // 处理结果
        
    }

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

    }
}
  1. 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插件配置请求基本信息

// Vue 入口文件
import Vue from 'vue'
import {RetroPlugin} from 'retrofit-cjs';

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{
    ...
}

欢迎大佬们吐槽。

LICENSE

MIT@ https://github.com/glangzh


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

ASP.NET 2.0技术内幕

ASP.NET 2.0技术内幕

埃斯帕斯托 / 施平安 / 清华大学出版社 / 2006-8 / 68.00元

《ASP.NET2.0技术内幕》围绕着ASP.NET 2.0是Web开发的重要分水岭这一主题,采用自顶向下的方式介绍ASP.NET 2.0的最新编程实践,从更广泛的特征到具体的实现和编程细节,充分展示了ASP.NET的最新编程实践。全书共15章,主题涉及HTTP运行库、安全性、缓存、状态管理、控件、数据绑定和数据访问。   《ASP.NET2.0技术内幕》主题丰富,讲解透彻,包含大量实例,是......一起来看看 《ASP.NET 2.0技术内幕》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码