Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chans-open-source/vue-apis
集成axios的vue插件
https://github.com/chans-open-source/vue-apis
ajax axios browser http mit-license node vue xhr
Last synced: about 2 months ago
JSON representation
集成axios的vue插件
- Host: GitHub
- URL: https://github.com/chans-open-source/vue-apis
- Owner: chans-open-source
- License: other
- Created: 2019-03-27T07:14:01.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T18:36:57.000Z (almost 2 years ago)
- Last Synced: 2024-07-29T23:08:37.852Z (5 months ago)
- Topics: ajax, axios, browser, http, mit-license, node, vue, xhr
- Language: JavaScript
- Size: 1.07 MB
- Stars: 27
- Watchers: 2
- Forks: 5
- Open Issues: 16
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-apis
[](https://github.com/996icu/996.ICU/blob/master/LICENSE)
[
](https://www.npmjs.com/package/vue-apis)
[
](https://github.com/Chans-Open-Source/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 ✔ |
[](https://saucelabs.com/u/axios)
## 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](#InterceptorObject) | undefined | You can intercept requests or responses before they are handled by then or catch. |
#### InterceptorObject
| field | type | description |
| --- | --- | --- |
| request | [RequestObject](#RequestObject) / Function | When the instance is 'Function', it is a 'then' callback to the interceptor |
| response | [ResponseObject](#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
* main.js
```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 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);
}
}
}
})
```
* api.js
```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
```html
export default {
data () {
return {
readme: ''
}
},
async created () {
const res = await this.$apis.readme()
this.readme = res
}
}
```
#### FormData
* Api
```js
const $api = {
formDataRequest (formData) {
return new ApiOptions()
.setUrl(URL)
.setMethod(ApiMethod.POST)
.setData(formData)
.request()
}
}
```
* Create FormData Instance
```js
const formData = new window.FormData()
formData.append(key, value)
// Request
this.$apis.formDataRequest(formData)
```
#### Custom Options
```js
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](https://github.com/Chans-Open-Source/official-web-for-vue)
* [Plugin Source](https://github.com/Chans-Open-Source/vue-apis)