glangzh / Retrofit Cjs
retrofit-cjs 是一个基于JavaScript装饰器(Decorator)和 axios 实现的网络请求库, 支持Vue / React / react-native 等常用框架
Stars: ✭ 87
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Retrofit Cjs
Library-Spring
The library web application where you can borrow books. It's Spring MVC and Hibernate project.
Stars: ✭ 73 (-16.09%)
Mutual labels: retrofit, annotations
Bottle Vue Kickstart
🍕 Very basic Bottle kickstart kit with Vue.js and Webpack. Included Axios, Autoprefixer, Babel, Webpack config, demo app with Bulma and Web font loader.
Stars: ✭ 83 (-4.6%)
Mutual labels: axios
Ktarmor
👻 Android快速开发框架, KtArmor 寓意着 为Android 赋予战斗装甲, 方便开发者快速进行Android 开发。
Stars: ✭ 76 (-12.64%)
Mutual labels: retrofit
Vue2 Multi Uploader
Drag and drop multiple file uploader with Vue.js v2 and Axios
Stars: ✭ 77 (-11.49%)
Mutual labels: axios
Sample Code Movies
This repository contains sample code. Its purpose being, to quickly demonstrate Android and software development in general, clean code, best practices, testing and all those other must know goodies.
Stars: ✭ 81 (-6.9%)
Mutual labels: retrofit
Axios Rus Docs
Русская документация по axios с уроками и примерами использования
Stars: ✭ 83 (-4.6%)
Mutual labels: axios
Wsdl Creator
PHP WSDL Creator using PHPdoc (annotations, reflections).
Stars: ✭ 79 (-9.2%)
Mutual labels: annotations
Kikoeru Express
kikoeru 后端,不再维护,请到https://github.com/umonaca/kikoeru-express 获取更新
Stars: ✭ 79 (-9.2%)
Mutual labels: axios
Awesome Skeleton
🎉 Release 3.0 is released! Awesome Skeleton for modern development on PHP 7.4+ (incl. PHP 8). Contains quality tested packages, thoughtful structure and everything you need to develop microservices.
Stars: ✭ 83 (-4.6%)
Mutual labels: annotations
Vue Cli3 Multipage
由vue-cli3搭建的多页面多路由初始化项目包,包含ESlint,Axios,vue-router,vuex,babel,以及自己封装的异步请求API接口。
Stars: ✭ 76 (-12.64%)
Mutual labels: axios
Retrofitlifecycle
Manage retrofit call's lifecycle with proxy class which generated by annotation
Stars: ✭ 81 (-6.9%)
Mutual labels: retrofit
Vue H5 Template
🎉vue搭建移动端开发,基于vue-cli4.0+webpack 4+vant ui + sass+ rem适配方案+axios封装,构建手机端模板脚手架
Stars: ✭ 1,261 (+1349.43%)
Mutual labels: axios
React Ufo
🛸 react-ufo - A simple React hook to help you with data fetching 🛸
Stars: ✭ 85 (-2.3%)
Mutual labels: axios
retrofit-cjs
retrofit-cjs 是一个基于JavaScript装饰器(Decorator)和 axios 实现的网络请求库, 支持Vue / React / react-native 等常用框架
使用方法
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'}})
- @PUT
- @DELETE
- @HTTP
-
@Config
- 设置请求信息,只作用与当前请求
- 查看请求配置
-
@Headers
- 设置请求头,只作用与当前请求
- @Cancel
- @Multipart
- @FormUrlEncoded
类修饰器
-
@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秒执行一次, 立即执行修饰函数
@Interval(1000, 10000) // 每隔1秒执行一次, 10秒后结束
@Interval(1000, 10000, true) // 每隔1秒执行一次, 10秒后结束,立即执行修饰函数
- @RetroPlugin Vue 插件:全局配置网络请求
注意:在同一个方法上,@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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].