vue-requests

A modern fetch plugin for Vue.js with easy config config and hooks

Installation

npm install vue-requests

Setup

import Vue from 'vue'
import VueRequests from 'vue-requests'

Vue.use(VueRequests, options)

Options

headers [Object]

Headers can contain any custom headers you'd like to include in your requests. The values can be properties or methods (ie. their values can either be functions, literals, or references). Use functions for values that may change over time, such as Vuex getters.

import store from './store'

const Identity = {
  $oid: '4234c0a877ccf94401baz'
}

const options = {
  headers: {
    Authorization() {
      return store.getters.auth_token
    },
    Refresh: 'example_refresh_token',
    Identity
  }
}

Vue.use(VueRequests, options)

before [Function]

Before hook to fire before each request. The hook uses async/await, so asynchronous hooks will complete before the actual request is made. This is particularly useful for checking if you have expired tokens and refreshing them before a request.

Here's an example of a before hook checking for expired tokens and attempting to refresh before the original request:

import store from './store'

const token = {
  id: '1234567890',
  expires: '2017-09-30T01:44:19.273Z'
}
const options = {
  async before() {
    if (new Date(token.expires) >= new Date()) {
      await store.dispatch('refresh_tokens')
    }
  }
}

Vue.use(VueRequests, options)

timeout [Function]

Timeout hook to fire in the event of a timeout.

const options = {
  timeout() {
    alert('The request timed out.')
  }
}

Vue.use(VueRequests, options)

timeout_duration [Number]

Duration in ms for fetch timeout limit.

const options = {
  timeout_duration: 25000
}

Vue.use(VueRequests, options)

Usage

import Vue from 'vue'
export default {
  mounted() {
    this.fetch()
  },
  methods: {
    async fetch() {
      const response = await this.$request('/data')
      this.$store.dispatch('set_data', response)
    },
    save() {
      const response = await this.$request('/data', {
        method: 'put',
        body: {
          foo: 'bar'
        }
      })
    }
  }
}

Requests

The request function accepts the following parameters:

url [String]

The base url to make relative requests from. If an absolute url is passed to the request function, this will be overriden.

options [Object]

The options parameter accepts the following parameters:

method [String]

The method of the request (get (default), put, post, delete, options)

body [Object|String]

The body of the request

headers [Headers]

Custom headers to add to the request

Response Headers

If you need access to the response headers, you can pass the responseHeaders option to the request method, which will result in the promise being resolved with an object containing body and headers.

this.$request('/data', {
  responseHeaders: true
})
.then(response => {
  console.log(response.body, response.headers)
})

Build Setup

# install dependencies
npm install

# serve demo at localhost:8080
npm start

# run tests with jest
npm test

# build dist version
npm run build

For detailed explanation on how things work, checkout the guide and docs for vue-loader.