Vue Axios Response

Posted on  by admin
You’re browsing the documentation for v2.x and earlier.

For v3.x, click here. There are many times when building application for the web that you may want to consume and display data from an API.

There are several ways to do so, but a very popular approach is to use axios, a promise-based HTTP client.

In this exercise, we’ll use the CoinDesk API to walk through displaying Bitcoin prices, updated every minute.

First, we’d install axios with either npm/yarn or through a CDN link.

There are a number of ways we can request information from the API, but it’s nice to first find out what the shape of the data looks like, in order to know what to display.

In order to do so, we’ll make a call to the API endpoint and output it so we can see it.

We can see in the CoinDesk API documentation, that this call will be made to https://api.coindesk.com/v1/bpi/currentprice.json.
psudopsudo
1,114
17

See the Pen First Step Axios and Vue by Vue (@Vue) on CodePen.

Akhtar MunirAkhtar Munir
1,6182

In our case, we can see that the price information we need lives in response.data.bpi.

If we use this instead, our output is as follows:.

See the Pen Second Step Axios and Vue by Vue (@Vue) on CodePen.
4

Not the answer you're looking for? Browse other questions tagged laravelvue.jsvuejs2axiossingle-page-application or ask your own question.