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 ✔

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

Options

InterceptorObject

RequestObject

ResponseObject

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>

FormData

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

// Request
this.$apis.formDataRequest(formData)

Custom Options

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
• Plugin Source