03 / 07 / 2022

40. Fetch an API to your web app

There are many interesting API on the internet that we can make use to create a creative web app. But how to add it to your code? We need the endpoint and the data sourse for the API. Then, we have to prepare two components, one for getting the data and the child component to display the data. I prefer using axios as it is widely support by various browsers and easy to use. We have to npm i axios to install the dependencies on your project. Then we can use the get method to the endpoint and returned response as a json file. As axios is a promise-based library, so we need to use a promise to call the get method. Then, we can pass the returned object to a state or a variable and use map to get all the data into individual components for your project.


There are still more ways to make use of the API. By fecthing different types of API, we can enrich the information on our project and make it more interesting.