await works on API callings. And also give the first steps with Axios.
I tried to keep the fewest amount of code as possible. Please feel free to post your comment so I can fix or include something making this post more interesting, ok? ;)
First, create an
index.html file with this content:
- In the first
scripttag it was imported the Axios library, so we can use their functions.
- On the tag with the id
datawe will embed the data from API.
- The second
scripttag will call the second file below, which will provide the data to the page.
How it works is simple:
getAllTitles creates a constant with the object containing the Axios configuration related to the request we are creating.
As you can see,
getAllTitles is an
async type of function, which means that, when the code interpreter hits the
await word, it will stop until the value arrives from the promise. This will ensure that
getAllTitles will return the data (or an error, but errors exceptions are not the focus of this article).
renderResult function is an asynchronous function too, because it needs the value returned from
getAllTitles to change the DOM, rendering the API content.
Now, just run your project and see the data on your navigator.
Hope you like these tips! Try changing the code and get different data from the API by consoling
Any questions just leave your comment, we have a great community willing to help!