# vue-apis **Repository Path**: changeden/vue-apis ## Basic Information - **Project Name**: vue-apis - **Description**: 一个集成了axios的vue插件。使用链式编程方式构建api,并以Promise返回请求实例。很好地简化了api的构建方式,和引用方式(通过this.$apis.apiName进行引用)。 - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 2 - **Created**: 2019-04-03 - **Last Updated**: 2024-10-12 ## Categories & Tags **Categories**: vue-extensions **Tags**: None ## README # vue-apis [ ![NPM version](https://img.shields.io/npm/v/vue-apis.svg) ![NPM download](https://img.shields.io/npm/dm/vue-apis.svg) ![NPM download](https://img.shields.io/npm/dw/vue-apis.svg) ](https://www.npmjs.com/package/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 ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![IE](https://raw.github.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) | --- | --- | --- | --- | --- | --- | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 11 ✔ | [![Browser Matrix](https://saucelabs.com/open_sauce/build_matrix/axios.svg)](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 ``` #### 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)