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.
Last updated 7 months ago by changeden .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vue-apis 
SYNC missed versions from official npm registry.

vue-apis

LICENSE

NPM version NPM download NPM download

GitHub watchers GitHub stars GitHub forks GitHub issues GitHub last commit (branch)

  • 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 Firefox Safari Opera Edge IE
Latest ✔ Latest ✔ Latest ✔ Latest ✔ Latest ✔ 11 ✔

Browser Matrix

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)

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 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
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
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>

Source Code

Current Tags

  • 0.3.2                                ...           latest (7 months ago)

16 Versions

  • 0.3.2                                ...           7 months ago
  • 0.3.1                                ...           7 months ago
  • 0.3.0                                ...           7 months ago
  • 0.2.3                                ...           8 months ago
  • 0.2.2                                ...           8 months ago
  • 0.2.1                                ...           8 months ago
  • 0.2.0                                ...           8 months ago
  • 0.1.9                                ...           8 months ago
  • 0.1.8                                ...           8 months ago
  • 0.1.7                                ...           8 months ago
  • 0.1.6                                ...           8 months ago
  • 0.1.4                                ...           8 months ago
  • 0.1.3                                ...           8 months ago
  • 0.1.2                                ...           8 months ago
  • 0.1.1                                ...           8 months ago
  • 0.1.0                                ...           8 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 2
Last Day 0
Last Week 2
Last Month 20
Dependencies (0)
None
Dev Dependencies (9)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |