内容简介: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. 使用
- 推荐
@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'});
- 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(){ } }
- 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
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。