Write a cookbook entry for axios requests #1480
Conversation
| @@ -0,0 +1,173 @@ | |||
| --- | |||
| title: Using Axios To Consume APIs | |||
There was a problem hiding this comment.
Title case wise, it should be to I believe.
| ```js | ||
| new Vue({ | ||
| el: '#app', | ||
| data() { |
There was a problem hiding this comment.
I guess this is the "space after function" rule we were talking about.
| console.log(error) | ||
| this.errored = true | ||
| this.loading = false | ||
| }) |
There was a problem hiding this comment.
Can we extract this.loading = false into a finally clause instead?
|
|
||
| ### Fetch | ||
|
|
||
| The [fetch API](https://developers.google.com/web/updates/2015/03/introduction-to-fetch) is a powerful native API for these types of requests. You may have heard that the benefits of using fetch is that you don't need to load an external resource in order to use it, which is true! Except... that it's not fully supported yet, so you will still need to use a polyfill. There are also some gotchas when working with this API, which is why many prefer to use axios for now. This may very well change in the future though. |
There was a problem hiding this comment.
Since we're referring to the API's name here, maybe Fetch API and then …of using Fetch, with reference to the MDN doc.
| <p data-height="200" data-theme-id="32763" data-slug-hash="6100b10f1b4ac2961208643560ba7d11" data-default-tab="result" data-user="Vue" data-embed-version="2" data-pen-title="Second Step Axios and Vue" class="codepen">See the Pen <a href="https://codepen.io/team/Vue/pen/6100b10f1b4ac2961208643560ba7d11/">Second Step Axios and Vue</a> by Vue (<a href="https://codepen.io/Vue">@Vue</a>) on <a href="https://codepen.io">CodePen</a>.</p> | ||
| <script async src="https://static.codepen.io/assets/embed/ei.js"></script> | ||
|
|
||
| This is a lot easier for us to display, so we can now update our html to display only the information we need from the data we've received, and we'll create a [filter](../api/#Vue-filter) to make sure that the decimal is in the appropriate place as well. |
|
|
||
| If you're interested in using fetch, there are some [very good articles](https://scotch.io/@bedakb/lets-build-type-ahead-component-with-vuejs-2-and-fetch-api) explaining how to do so. | ||
|
|
||
| ## Wrapping up |
|
|
||
| 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](https://github.com/axios/axios), a promise-based HTTP client. | ||
|
|
||
| In this exercise, we'll use the [Coindesk API](https://www.coindesk.com/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 was a problem hiding this comment.
Sorry I missed this in the last review batch. Shouldn't it be CoinDesk (capital D) instead?
There was a problem hiding this comment.
Totally :) I'll get that in
|
@phanan should be good now, but I'm happy to make further changes if you see anything else that looks like it needs updating |
|
Looks like we're sticking with the space after parens after all, so I updated the PR to reflect that. |
|
|
||
| ## Wrapping Up | ||
|
|
||
| There are many ways to work with Vue and axios beyond consuming and displaying an API. You can also communicate with Serverless Functions, post/edit/delete from an API where you have write access, and many other benefits. Due to the straightforward integration of these two libraries, it's become a very common choice for developers who need to integrate HTTP clients into their workflow. |
There was a problem hiding this comment.
Sorry for late but does "post/edit/delete" here mean the HTTP methods? If yes, the method "edit" should be "put" I guess.
Thanks.
Working with axios to consume API data is really common in a Vue application, so I wrote a cookbook entry to help newcomers get started.