Using Axios to Consume APIs — Vue.js | vue axios promise
BaseExampleTherearemanytimeswhenbuildingapplicationforthewebthatyoumaywanttoconsumeanddisplaydatafromanAPI.Thereareseveralwaystodoso,butaverypopularapproachistouseaxios[1],apromise-basedHTTPclient.Inthisexercise,we’llusetheCoinDeskAPI[2]towalkthroughdisplayingBitcoinprices,updatedeveryminute.First,we’dinstallaxioswitheithernpm/yarnorthroughaCDNlink.ThereareanumberofwayswecanrequestinformationfromtheAPI,butit’snicetofirstfindoutwhattheshapeofthedatalookslike,inordertoknowwhattodisplay.Inorder...
Base ExampleThere 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[1], a promise-based HTTP client.
In this exercise, we’ll use the CoinDesk API[2] 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. So first, we’ll create a data property that will eventually house our information, and we’ll retrieve the data and assign it using the mounted lifecycl...