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":
如果是使用 create-react-app 创建的项目,需要先弹出 webpack 配置
npm run eject
安装 babel-plugin-transform-decorators-legacy,在 package.json 中配置 babel
"babel":
vue-cli3 已默认支持 Decorator
2. 引入 retrofit-cjs
;
修饰器
属性方法修饰器
@ @ @ @ @
@
- @PUT
- @DELETE
- @HTTP
- @Config
- 设置请求信息,只作用与当前请求
- 查看请求配置
- @Headers
- 设置请求头,只作用与当前请求
- @Cancel
- @Multipart
- @FormUrlEncoded
类修饰器
- @Create
- 创建新的请求实例,后续其他操作都依赖与创建的实例,默认使用全局的请求实例。可配置请求基础信息,也可通过 @Config 和 @Headers 完成基础信息配置
- @Config
- 配置全局请求信息,若使用了 @Create 则作用与当前请求对象,否则作用与全局对象
- @Headers
- 配置全局请求头信息,若使用了 @Create 则作用与当前请求对象,否则作用与全局对象
- @AddReqInterceptor 添加请求拦截器
- @AddResInterceptor 添加响应拦截器
注意配置顺序,修饰器会从内向外执行
一些工具修饰器
- @Debounce 防抖
@ // 1秒防抖 @ // 1秒防抖, 立即执行
- @Throttle 节流
@ // 忽略开始函数的的调用 @ // 忽略结尾函数的调用 // 两者不能共存, 否则函数不能执行
- @Timer 定时操作
@ // 延迟1秒执行 @ // 延迟1秒执行, 立即执行修饰函数
- @Interval 定时操作
@ // 每隔1秒执行一次 @ // 每隔1秒执行一次, 立即执行修饰函数 @ // 每隔1秒执行一次, 10秒后结束 @ // 每隔1秒执行一次, 10秒后结束,立即执行修饰函数
- @RetroPlugin Vue 插件:全局配置网络请求
注意:在同一个方法上,@Debounce,@Throttle,@Timer,@Interval 和 @GET,@POST,@PUT,@DELETE,@HTTP是无法同时使用的
3. 使用
- 推荐
@@@@ static { return ; } @ @ @ @ // @GET('/v1/{0}', 'topics') // @GET('https://cnodejs.org/api/v1/topics') // @GET({url: '/v1/topics', params: {limit: 10}}) { // 处理结果 return res; } @ // @HTTP({ // url: '/v1/topic/5433d5e4e737cbe96dcef312', // method: 'get', // params: {} // }) @ { // response result } // 以表单方式提交数据 @FormUrlEncoded @ // @POST({url: '/user', data: {id: 1, name: 'glang'}}) { } let topicApi = TopicApi;// topicApi.getTopicDetails('topicId=5433d5e4e737cbe96dcef312', {// limit: 20// });// 参数会按 {} 自动匹配topicApi;topicApi;
- react / react-native
; @ { superprops; // this.countdwon = this.countdwon.bind(this); } @ { // 处理结果 } @ { }
- vue
name: "app" { this; } methods: // @Config 只影响当前网络请求 @ @ { // }
@RetroPlugin
使用Vue插件配置请求基本信息
// Vue 入口文件; Vue;
@AddReqInterceptor
通过请求拦截器处理请求参数
@ ...