Axios is a popular HTTP client that is used with Vue apps.
In this article, we’ll look at how to make requests with Axios in a Vue app.
Installation
We can install the package by running:
npm i axios
Also, we can add the library with a script tag. Either we can write:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
or:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Making Requests
To make a request with Axios, we just call the methods that come with the library.
For example, to make a GET request, we can write:
<template>
<div id="app"></div>
</template>
<script>
import axios from "axios";
export default {
name: "App",
async beforeMount() {
const { data } = await axios.get(
"https://jsonplaceholder.typicode.com/posts"
);
console.log(data);
}
};
</script>
We pass in the URL to the get method to make a GET request.
To make a POST request, we can use the POST method:
<template>
<div id="app"></div>
</template>
<script>
import axios from "axios";
export default {
name: "App",
async beforeMount() {
const { data } = await axios.post(
"https://jsonplaceholder.typicode.com/posts",
{
title: "foo",
body: "bar",
userId: 1
}
);
console.log(data);
}
};
</script>
The 2nd argument is the request body.
The axios object can also be called directly to make a request.
To make a GET request, we can write:
<template>
<div id="app"></div>
</template>
<script>
import axios from "axios";
export default {
name: "App",
async beforeMount() {
const { data } = await axios({
method: "post",
url: "https://jsonplaceholder.typicode.com/posts",
data: {
title: "foo",
body: "bar",
userId: 1
}
});
console.log(data);
}
};
</script>
We have the method property that sets the request method.
url has the request URL.
data has the request body.
To make a GET request, we can write:
<template>
<div id="app"></div>
</template>
<script>
import axios from "axios";
export default {
name: "App",
async beforeMount() {
const { data } = await axios({
method: "get",
url: "https://jsonplaceholder.typicode.com/posts/1"
});
console.log(data);
}
};
</script>
Axios Instance
We can create our own Axios object with the axios.create method:
<template>
<div id="app"></div>
</template>
<script>
import axios from "axios";
const instance = axios.create({
baseURL: "https://jsonplaceholder.typicode.com/posts",
timeout: 1000,
headers: { "X-Custom-Header": "foobar" }
});
export default {
name: "App",
async beforeMount() {
const { data } = await instance.get("/1");
console.log(data);
}
};
</script>
We set the base URL of the requests with the baseURL property.
Also, we can set the headers, timeout, and other request parameters.
Then we call get with the URL relative to the baseURL and get the data .
Interceptors
We can add interceptors for requests and responses. For example, we can write:
<template>
<div id="app"></div>
</template>
<script>
import axios from "axios";
axios.interceptors.request.use(
config => {
console.log(config);
return config;
},
error => {
return Promise.reject(error);
}
);
export default {
name: "App",
async beforeMount() {
const { data } = await axios({
method: "get",
url: "https://jsonplaceholder.typicode.com/posts/1"
});
console.log(data);
}
};
</script>
We call axios.interceptors.request.use to call intercept requests.
To intercept responses, we can write:
<template>
<div id="app"></div>
</template>
<script>
import axios from "axios";
axios.interceptors.response.use(
config => {
console.log(config);
return config;
},
error => {
return Promise.reject(error);
}
);
export default {
name: "App",
async beforeMount() {
const { data } = await axios({
method: "get",
url: "https://jsonplaceholder.typicode.com/posts/1"
});
console.log(data);
}
};
</script>
Conclusion
We can make HTTP requests with Axios in our Vue app.
