Most apps need to make HTTP requests to an external server for them to be useful.
Vue.js doesn’t come with its own HTTP client.
However, we can add one ourselves so that we can make requests with it.
One of the best HTTP client libraries is the Axios HTTP client.
To use it, first, we in install it by running:
npm i axios
Then to make requests with it, we can write:
<template>
<div id="app">{{info}}</div>
</template>
<script>
import axios from "axios";
export default {
name: "App",
data() {
return {
info: {}
};
},
mounted() {
axios
.get("https://api.coindesk.com/v1/bpi/currentprice.json")
.then(response => (this.info = response.data.bpi));
}
};
</script>
We make a request to the Conidesk API to get the current prices of Bitcoins.
To make the code shorter, we can write:
<template>
<div id="app">{{info}}</div>
</template>
<script>
import axios from "axios";
export default {
name: "App",
data() {
return {
info: {}
};
},
async mounted() {
const response = await axios.get(
"https://api.coindesk.com/v1/bpi/currentprice.json"
);
this.info = response.data.bpi;
}
};
</script>
We replaced then with await to make the code shorter.
To deal with errors, we can use try/catch:
<template>
<div id="app">
<div v-if="!errored">{{info}}</div>
<div v-else>error</div>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "App",
data() {
return {
info: {},
errored: false
};
},
async mounted() {
try {
const response = await axios.get(
"https://api.coindesk.com/v1/bpi/currentprice.json"
);
this.info = response.data.bpi;
} catch (error) {
this.errored = true;
}
}
};
</script>
We set this.errored to true in the catch block. This catches the error.
Now we see the price data from the API.
To format the data, we can rewrite our template to display the price.
We can write:
<template>
<div id="app">
<div v-if="!errored">
<p v-for="(value, key) in info" :key="key">{{key}}: {{value.rate}}</p>
</div>
<div v-else>error</div>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "App",
data() {
return {
info: {},
errored: false
};
},
async mounted() {
try {
const response = await axios.get(
"https://api.coindesk.com/v1/bpi/currentprice.json"
);
this.info = response.data.bpi;
} catch (error) {
this.errored = true;
}
}
};
</script>
We have the v-for directive to loop through the info object.
The value has the value of a property.
The key has the key, which is the currency code.
We display the code property of the value to display the price.
With Axios, we can make HTTP requests easily within in a Vue.js component.
