![LICENSE](https://camo.githubusercontent.com/0e93bc284904f390f4b9bd40e26a104224e0f3c03d44123bd11d72e6a660999a/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542532303939362d626c75652e737667)
- 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进行引用)。
![Chrome](https://camo.githubusercontent.com/2f8de8557750a0bc532ee90e4d31285d71f9d874498f5160838c90a5e4f8dcbe/68747470733a2f2f7261772e6769746875622e636f6d2f616c7272612f62726f777365722d6c6f676f732f6d61737465722f7372632f6368726f6d652f6368726f6d655f34387834382e706e67) |
![Firefox](https://camo.githubusercontent.com/38715a99958264d094a8e0e08c3e4f206130c13a0c0eace251ac6a119fd2bcbf/68747470733a2f2f7261772e6769746875622e636f6d2f616c7272612f62726f777365722d6c6f676f732f6d61737465722f7372632f66697265666f782f66697265666f785f34387834382e706e67) |
![Safari](https://camo.githubusercontent.com/f362bbd42e63723eaf94d0860fc9a0d019fd33f7ab34df235a1ba3294e1f09d6/68747470733a2f2f7261772e6769746875622e636f6d2f616c7272612f62726f777365722d6c6f676f732f6d61737465722f7372632f7361666172692f7361666172695f34387834382e706e67) |
![Opera](https://camo.githubusercontent.com/89ab8d29f6a8b642de53867f99d11a48024148c296a6a746983f0b6df2d01787/68747470733a2f2f7261772e6769746875622e636f6d2f616c7272612f62726f777365722d6c6f676f732f6d61737465722f7372632f6f706572612f6f706572615f34387834382e706e67) |
![Edge](https://camo.githubusercontent.com/a64956f45606d40bb9a798d7312c07379c492e7ca9b22605612c2d5f8884a333/68747470733a2f2f7261772e6769746875622e636f6d2f616c7272612f62726f777365722d6c6f676f732f6d61737465722f7372632f656467652f656467655f34387834382e706e67) |
![IE](https://camo.githubusercontent.com/b8f411b3e73ca58b2c92d6803b3b6c1f2302e173df8ba8ded2fa3204dc32f122/68747470733a2f2f7261772e6769746875622e636f6d2f616c7272612f62726f777365722d6c6f676f732f6d61737465722f7372632f617263686976652f696e7465726e65742d6578706c6f7265725f392d31312f696e7465726e65742d6578706c6f7265725f392d31315f34387834382e706e67) |
Latest ✔ |
Latest ✔ |
Latest ✔ |
Latest ✔ |
Latest ✔ |
11 ✔ |
![Browser Matrix](https://camo.githubusercontent.com/1da57b5454429f42302d6c91162bcefa1fea8d288a85a0a2b0afd161a86de7ab/68747470733a2f2f73617563656c6162732e636f6d2f6f70656e5f73617563652f6275696c645f6d61747269782f6178696f732e737667)
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); } |
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 sent
return config;
},
catch(error) {
// Do something with request error
return Promise.reject(error);
}
},
response: {
then(response) {
// Do something with response data
return response;
},
catch(error) {
// Do something with response 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>
const $api = {
formDataRequest (formData) {
return new ApiOptions()
.setUrl(URL)
.setMethod(ApiMethod.POST)
.setData(formData)
.request()
}
}
const formData = new window.FormData()
formData.append(key, value)
// Request
this.$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()
}
}