Use ES7 decorators to wrap AXIOS

retrofit-cjsReact-native is a web request library based on JavaScript decorators and axios implementations, supporting Vue/React/React-native frameworks and node.js

Method of use

1. Install

npm i retrofit-cjs --saveCopy the code

Babel transcoder support

Install Babel – plugin – transform, decorators, and legacy

npm i babel-plugin-transform-decorators-legacy -DCopy the code

Configure the.babelrc file

"plugins": ["transform-decorators-legacy"]Copy the code

If the project is created using create-react-app, the WebPack configuration needs to pop up first

npm run ejectCopy the code

Install babel-plugin-transform-decorators-legacy and configure Babel in package.json

"babel": {
    "presets": [
        "react-app"
    ],
    "plugins": [
        "transform-decorators-legacy"
    ]
  }Copy the code

Vue-cli3 already supports decorators by default

2. Introduce the retrofit – CJS

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

decorator

Property method decorator

• @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}')Copy the code

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

Class decorator

• @Create
  • Create a new request instance. Subsequent operations depend on the created instance. By default, the global request instance is used. Basic request information can be configured or configured using @config or @headers
• @Config
  • Configure global request information. If @create is used, it applies to the current request object; otherwise, it applies to the global object
• @Headers
  • Configure the global request header to apply to the current request object if @create is used, and to the global object otherwise
• @addreqInterceptor Adds a request interceptor
• @AddResInterceptorAdd a response interceptor
  

  Note the order in which modifiers are executed from the inside out

Some tool modifiers

• @ Debounce stabilization

@debounce (1000) // 1 second buffeting @debounce (1000, true) // 1 second buffeting, execute immediatelyCopy the code

• @ Throttle orifice

@throttle (1000, {trailing: false}) @throttle (1000, {trailing: false}) @throttle (1000, {trailing: false}Copy the code

• @timer Indicates the Timer operation

@timer (1000) // Delay execution by 1 second @timer (1000, true) // Delay execution by 1 second, execute modifier function immediatelyCopy the code

• @interval Indicates a scheduled operation

@interval (1000) // every one second @Interval(1000, true) // Every one second, immediately execute the modifier @interval (1000, 10000) // Every one second, End after 10 seconds @interval (1000, 10000, true) // Execute every one second, end after 10 seconds, execute modifier immediatelyCopy the code

• RetroPlugin Vue plugin: Globally configure network requests

Note: @debounce, @throttle, @timer, @interval and @get, @post, @put, @delete, @http cannot be used together on the same method

Use 3.

1. recommended

@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){// } @Debounce(2000) // @HTTP({ // url: '/v1/topic/5433d5e4e737cbe96dcef312', // method: 'get', // params: {} //}) @get ('/v1/topic/{topicId}') getTopicDetails(res){// Response result} // FormUrlEncoded data @POST('/user') // @POST({url: '/user', data: {id: 1, name: 'glang'}}) addUser(res) { } } let topicApi = TopicApi.getInstance(); // topicApi.getTopicDetails('topicId=5433d5e4e737cbe96dcef312', { // limit: 20 // }); GetTopicDetails ({topicId: '5433D5e4e737cbe96dcEF312 ', limit: 20}); topicApi.addUser({id: 1, name: 'glang'});Copy the code

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(){}Copy the code

1. vue

export default { name: "app", mounted() { this.getList(); }, methods: {// @config only affects the current network request @config ({baseURL: 'https://cnodejs.org/api', timeout: 1000 }) @GET("/v1/topics") getList(res, err) { // } } }Copy the code

@RetroPlugin

Import Vue from 'Vue' import {RetroPlugin} from 'retrofit-cjs'; Vue.use(RetroPlugin, { baseURL: 'https://cnodejs.org/api', timeout: 1000, headers: { 'X-Custom-Header': 'foobar' } });Copy the code

@AddReqInterceptor

Request parameters are processed through the request interceptor

@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{ ... }Copy the code