vue-axios-plugin

    1.3.0 • Public • Published

    vue-axios-plugin

    Build Status Downloads Version js-standard-style

    axios plugin for Vuejs project

    How to install

    Script tag

    <!-- add it after vue.js -->
    <script src="https://unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-axios-plugin"></script>

    CommonJS

    npm install --save vue-axios-plugin

    And in your entry file:

    import Vue from 'Vue'
    import VueAxiosPlugin from 'vue-axios-plugin'
     
    Vue.use(VueAxiosPlugin, {
      // request interceptor handler
      reqHandleFunc: config => config,
      reqErrorFunc: error => Promise.reject(error),
      // response interceptor handler
      resHandleFunc: response => response,
      resErrorFunc: error => Promise.reject(error)
    })

    Options

    Except axios default request options, vue-axios-plugin provide below request/response interceptors options:

    Name Type Default Description
    reqHandleFunc {Function} config => config The handler function for request, before request is sent
    reqErrorFunc {Function} error => Promise.reject(error) The error function for request error
    resHandleFunc {Function} response => response The handler function for response data
    resErrorFunc {Function} error => Promise.reject(error) The error function for response error

    Usage

    Default method in $http, it just contains get and post method:

    this.$http.get(url, data, options).then((response) => {
      console.log(response)
    })
    this.$http.post(url, data, options).then((response) => {
      console.log(response)
    })

    Use axios original method in $axios, by this, you can use all allowed http methods: get,post,delete,put...

    this.$axios.get(url, data, options).then((response) => {
      console.log(response)
    })
     
    this.$axios.post(url, data, options).then((response) => {
      console.log(response)
    })

    ChangeLog for v1.3.0

    Before v1.3.0, it send a request use application/x-www-form-urlencoded format by default, so it config transformRequest for post request by default, but it is unreasonable. So in v1.3.0, I remove it, all configuration depends on yourself, so you can config the Content-Type and transformRequest depend on your backend service.

    TODO

    • [] Unit test.

    Notice!!!

    When you send a request use application/x-www-form-urlencoded format, you need to use qs library to transform post data, like below:

    import qs from 'qs'
    this.$http.post(url, qs.stringify(data), {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      }
    }).then((response) => {
      console.log(response)
    })

    But if the data has properties who's type if object/array, you need convert these properties into JSON string:

    import qs from 'qs'
     
    function jsonProp (obj) {
      // type check
      if (!obj || (typeof obj !== 'object')) {
        return obj
      }
      Object.keys(obj).forEach((key) => {
        if ((typeof obj[key]) === 'object') {
          obj[key] = JSON.stringify(obj[key])
        }
      })
      return obj
    }
     
    this.$http.post(url, qs.stringify(data), {
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      transformRequest: [
        function (data) {
          // if data has object type properties, need JSON.stringify them.
          return qs.stringify(jsonProp(data))
        }
      ]
    }).then((response) => {
      console.log(response)
    })

    More usage, view axios

    License

    MIT

    Install

    npm i vue-axios-plugin

    DownloadsWeekly Downloads

    280

    Version

    1.3.0

    License

    MIT

    Unpacked Size

    283 kB

    Total Files

    10

    Last publish

    Collaborators

    • yugasun