The vue-resource library is a useful HTTP client library for Vue apps.
It’s a good alternative to Axios for making requests.
In this article, we’ll look at how to use it to make HTTP requests with a Vue app.
Installation
We can install the library by running:
yarn add vue-resource
or
npm install vue-resource
It can also be included with a script tag:
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
Making Requests
To make a request, we register the plugin in main.js by writing:
import Vue from "vue";
import App from "./App.vue";
import VueResource from "vue-resource";
Vue.use(VueResource);
Vue.config.productionTip = false;
new Vue({
render: (h) => h(App)
}).$mount("#app");
Then to make the request, we write:
<template>
<div id="app">{{response}}</div>
</template>
<script>
export default {
name: "App",
data() {
return {
response: {}
};
},
async beforeMount() {
const { bodyText } = await this.$http.get(
"https://api.agify.io//?name=michael"
);
this.response = JSON.parse(bodyText);
}
};
</script>
We call this.$http.get to make a get request to an endpoint.
To make a post request, we can write:
<template>
<div id="app">{{response}}</div>
</template>
<script>
export default {
name: "App",
data() {
return {
response: {}
};
},
async beforeMount() {
const { bodyText } = await this.$http.post(
"https://jsonplaceholder.typicode.com/posts",
{
title: "foo",
body: "bar",
userId: 1
}
);
this.response = JSON.parse(bodyText);
}
};
</script>
We just pass the request body into the 2nd argument.
Getting Response
We can get the response header from the headers property:
"<template>
<div id="app">{{response}}</div>
</template>
<script>
export default {
name: "App",
data() {
return {
response: {}
};
},
async beforeMount() {
const response = await this.$http.post(
"https://jsonplaceholder.typicode.com/posts",
{
title: "foo",
body: "bar",
userId: 1
}
);
console.log(response.headers.get("Expires"));
this.response = JSON.parse(response.bodyText);
}
};
</script>
We pass the header key to the get method to get its value.
Getting a Blob
We can get a blob with the this.$http.get method to get a blob.
All we have to do is set the responseType to 'blob' :
"<template>
<div id="app"></div>
</template>
<script>
export default {
name: "App",
data() {
return {
response: {}
};
},
async beforeMount() {
const response = await this.$http.get(
"https://picsum.photos/id/23/200/300",
{ responseType: "blob" }
);
const blob = await response.blob();
console.log(blob);
}
};
</script>
Interceptors
We add an interceptor to set the request header for all requests.
We can set the request headers globally by writing:
main.js
import Vue from "vue";
import App from "./App.vue";
import VueResource from "vue-resource";
Vue.use(VueResource);
Vue.config.productionTip = false;
Vue.http.interceptors.push((request) => {
request.headers.set("X-CSRF-TOKEN", "TOKEN");
request.headers.set("Authorization", "Bearer TOKEN");
});
new Vue({
render: (h) => h(App)
}).$mount("#app");
App.vue
<template>
<div id="app">{{response}}</div>
</template>
<script>
export default {
name: "App",
data() {
return {
response: {}
};
},
async beforeMount() {
const { bodyText } = await this.$http.post(
"https://jsonplaceholder.typicode.com/posts",
{
title: "foo",
body: "bar",
userId: 1
}
);
this.response = JSON.parse(bodyText);
}
};
</script>
We have the Vue.http.interceptors.push method to modify requests with the request.headers.set method.
Conclusion
We can use the vue-resource library to make requests in a Vue app.
