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.
Setting Request Headers and Query Parameters Per Request
We can set headers per request by setting the headers property of the request object.
To set the query string parameters, we can put them in the object we set as the value of the params property.
For example, 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.get("https://api.agify.io", {
params: { name: "michael" },
headers: { Accept: "application/json" }
});
this.response = JSON.parse(bodyText);
}
};
</script>
Resource
We can use the this.$resource property to make different requests with the same base URL.
For example, we can write:
<template>
<div id="app">{{response}}</div>
</template>
<script>
export default {
name: "App",
data() {
return {
response: {}
};
},
async beforeMount() {
const resource = this.$resource(
"https://jsonplaceholder.typicode.com/posts{/id}"
);
const getResponse = await resource.get({ id: 1 });
console.log(getResponse);
const saveResponse = await resource.save(
{},
{ title: "foo", body: "bar", userId: 1 }
);
console.log(saveResponse);
}
};
</script>
We called the this.$resource method with the base URL to return a resource object that we can call.
{/id} is a placeholder for the URL parameter.
Then we can call resource.get to make a GET request.
And resource.save makes a POST request. The first argument is an object with the URL parameter values.
The 2nd argument is the request body.
The query method also makes a GET request.
The update method makes a PUT request.
And the delete or remove method makes a DELETE request.
For example, we can call query by writing:
<template>
<div id="app">{{response}}</div>
</template>
<script>
export default {
name: "App",
data() {
return {
response: {}
};
},
async beforeMount() {
const resource = this.$resource(
"https://jsonplaceholder.typicode.com/posts{/id}"
);
const getResponse = await resource.query({ id: 1 });
console.log(getResponse);
}
};
</script>
To make a PUT request, we can write:
<template>
<div id="app">{{response}}</div>
</template>
<script>
export default {
name: "App",
data() {
return {
response: {}
};
},
async beforeMount() {
const resource = this.$resource(
"https://jsonplaceholder.typicode.com/posts{/id}"
);
const updateResponse = await resource.update(
{ id: 1 },
{
title: "foo",
body: "bar",
userId: 1
}
);
console.log(updateResponse);
}
};
</script>
The argument is the same as the other methods.
To make a DELETE request, we can write:
<template>
<div id="app">{{response}}</div>
</template>
<script>
export default {
name: "App",
data() {
return {
response: {}
};
},
async beforeMount() {
const resource = this.$resource(
"https://jsonplaceholder.typicode.com/posts{/id}"
);
const removeResponse = await resource.remove({ id: 1 });
console.log(removeResponse);
}
};
</script>
or:
<template>
<div id="app">{{response}}</div>
</template>
<script>
export default {
name: "App",
data() {
return {
response: {}
};
},
async beforeMount() {
const resource = this.$resource(
"https://jsonplaceholder.typicode.com/posts{/id}"
);
const removeResponse = await resource.delete({ id: 1 });
console.log(removeResponse);
}
};
</script>
Conclusion
We can make requests easily in a Vue app with the vue-resource library.
