基于ES6封装class使用的axios使用方案 retrofit-cjs

    

基于ES6封装class使用的axios使用方案 retrofit-cjs

使用方法

  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"]

引入 retrofit-cjs

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

修饰器
属性方法修饰器
@GET

    @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

  @POST({url: '/user', data: {id: 1, name: 'glang'}})

@PUT
@DELETE
@HTTP
@Config
设置请求信息,只作用与当前请求
查看请求配置
@Headers
设置请求头,只作用与当前请求
@Cancel
@Multipart
@FormUrlEncoded
以表单方式提交数据,默认以json方式提交
兼容适配处理方案
通过请求拦截器处理

类修饰器
@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是无法同时使用的
  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'});

方案二:

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

示例:(实际项目中使用)

{
  "presets": [
    ["env", {
      "modules": false
    }],
    "stage-2"
  ],
  "plugins": ["transform-runtime","transform-decorators-legacy"]
}
import { GET, POST, Headers, Interval } from 'retrofit-cjs';
@GET(process.env.API_HOST + 'admin/account/maddress')
@Interval(1000, true)
    getList(res, err) {
    console.log(res.data);
}

如果该文档有误,请参考 官方传送门

所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改,但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网,如果有侵权内容、不妥之处,请联系我们删除。敬请谅解!

添加新评论

  关于博主

QQ:1960727927
E-Mail:ceet@vip.qq.com
个人主页:https://tencent.信息

  近期评论

  •  osc_omoo: 前端加密后端解密吧?你不会用的是nodejs吧?改成java的后端解密麻烦吗?
  •  环洋诚信SSL证书客服: 按照博主的思路和代码,我已经搭建成功了。但是有一个小小的问题想请教下,重新执行安装代码后,之前...
  •  澄弘: 已经添加了你的博客

只有脚踏实地的人,才能够说:路,就在我的脚下。

无论你选择做什么,追求完美的程度决定你成就的高度。

这个世界最脆弱的是生命,身体健康,很重要。

上帝说:你要什么便取什么,但是要付出相当的代价。

现在站在什么地方不重要,重要的是你往什么方向移动。