Make HTTP Requests in a Vue App with vue-resource — More Requests

Photo by Saad Chaudhry on Unsplash

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…