vue-requests v1.1.6
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.