vue apis
1.0.0
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进行引用）。
| Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 11 ✔ |
npm install vue-apis // or yarn add vue-apis
import Vue from 'vue' import VueApis from 'vue-apis' Vue.use(VueApis, options)
| 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 |
| 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. |
| 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 |
| Function | e.g. |
|---|---|
| then | (config) => { return config; } |
| catch | (error) => { return Promise.reject(error); } |
| Function | e.g. |
|---|---|
| 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 $apihome.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>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)
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()
}}Official Demo Source
Plugin Source
