vue apis

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	eg
then	(config) => { return config; }
catch	(error) => { return Promise.reject(error); }

ResponseObject

Function	eg
then	(response) => { return response; }
catch	(error) => { return Promise.reject(error); }

範例

• main.js

 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) {// Do something before request is sentreturn config; }, catch(error) {// Do something with request errorreturn Promise.reject(error); }},response: { then( response) {// Do something with response datareturn response; }, catch(error) {// Do something with response errorreturn Promise.reject(error); }}
}})

• api.js

 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

• home.vue

 <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

• Api

 const $api = {
formDataRequest (formData) {return new ApiOptions().setUrl(URL).setMethod(ApiMethod.POST).setData(formData).request()
}}

• Create FormData Instance

 const formData = new window.FormData()formData.append(key, value)// Requestthis.$apis.formDataRequest(formData)

Custom Options

 const $api = {
formDataRequest (formData) {return new ApiOptions().setUrl(URL).setMethod(ApiMethod.POST).setData(formData).setCustomOptions({ url: `https://baidu.com`, // invalid data: {} , // invalid params: {}, // invalid headers: {}, // invalid method: {}, // invalid responseType: 'stream' // valid}, /* is clear all custom options at first */ false).request()
}}

Source Code

• Official Demo Source

• Plugin Source