vue-apis
A vue plug-in integrated with axios. Build the API using chain programming and return the request instance as a Promise. A nice simplification of how apis are built, and how they are referenced.
一个集成了axios的vue插件。使用链式编程方式构建api,并以Promise返回请求实例。很好地简化了api的构建方式,和引用方式(通过this.$apis.apiName进行引用)。
Browser Support
Latest ✔
Latest ✔
Latest ✔
Latest ✔
Latest ✔
11 ✔
Installing
npm install vue-apis
// or
yarn add vue-apis
Usage
Import
import Vue from 'vue'
import VueApis from 'vue-apis'
Vue.use(VueApis, options)
Api
function
example
argument
description
setUrl
setUrl('https://baidu.com')
(url: String)
set request url address
setData
setData({ a: 1})
(data: Object)
set post body object
setParams
setParams({ t: Date.now() })
(params: Object)
set request url query
setHeaders
setHeaders({ 'content-type': 'application/json' })
(headers: Object)
set request headers
setTimeout
setTimeout(10000)
(timeout: Number)
set request timeout
setCustomOptions
setCustomOptions({ responseType: 'stream' })
(options: Object, clear: boolean)
set custom options
Options
option key
type
default value
description
apis
object
{}
api set
showLoading
function
undefined
show loading layout function
hideLoading
function
undefined
hide loading layout function
interceptors
InterceptorObject
undefined
You can intercept requests or responses before they are handled by then or catch.
InterceptorObject
field
type
description
request
RequestObject / Function
When the instance is 'Function', it is a 'then' callback to the interceptor
response
ResponseObject / Function
When the instance is 'Function', it is a 'then' callback to the interceptor
RequestObject
Function
e.g.
then
(config) => { return config; }
catch
(error) => { return Promise.reject(error); }
ResponseObject
Function
e.g.
then
(response) => { return response; }
catch
(error) => { return Promise.reject(error); }
Example
import Vue from ' vue '
import VueApis from ' vue-apis '
import Api from ' ./api '
Vue . use ( VueApis , {
apis : Api ,
showLoading : ( ) => {
console . log ( ' showLoading ' )
} ,
hideLoading : ( ) => {
console . log ( ' hideLoading ' )
} ,
interceptors : {
request : {
then ( config ) {
return config ;
} ,
catch ( error ) {
return Promise . reject ( error ) ;
}
} ,
response : {
then ( response ) {
return response ;
} ,
catch ( error ) {
return Promise . reject ( error ) ;
}
}
}
} )
import { ApiOptions , ApiMethod } from ' vue-apis '
const $api = {
readme ( ) {
return new ApiOptions ( )
. setUrl ( ` https://raw.githubusercontent.com/Chans-Open-Source/vue-apis/master/README.md ` )
. setMethod ( ApiMethod . GET )
. setParams ( {
timestamp : Date . now ( )
} )
. setHeaders ( {
Authorization : ` Bearer ${ Date . now ( ) } `
} )
. request ( )
}
}
export default $api
< template >
< div v-html = " readme " > < / div >
</ template >
< script >
export default {
data ( ) {
return {
readme : ' '
}
} ,
async created ( ) {
const res = await this . $apis . readme ( )
this . readme = res
}
}
</ script >
FormData
const $api = {
formDataRequest ( formData ) {
return new ApiOptions ( )
. setUrl ( URL )
. setMethod ( ApiMethod . POST )
. setData ( formData )
. request ( )
}
}
const formData = new window . FormData ( )
formData . append ( key , value )
this . $apis . formDataRequest ( formData )
Custom Options
const $api = {
formDataRequest ( formData ) {
return new ApiOptions ( )
. setUrl ( URL )
. setMethod ( ApiMethod . POST )
. setData ( formData )
. setCustomOptions ( {
url : ` https://baidu.com ` ,
data : { } ,
params : { } ,
headers : { } ,
method : { } ,
responseType : ' stream '
} , false )
. request ( )
}
}
Source Code