An API is simply a medium to fetch or send data between interfaces. Let’s say you want to make an application that provides the user with some real-time data fetched from the server or maybe even allows you to modify or add data to some other endpoint. This is made possible by the API or the Application Programming Interface.
We will use a simple public API that requires no authentication and allows you to fetch some data by querying the API with GET requests.
https://randomuser.me/ is a website that provides dummy data for random users that we can easily work with. We can get the response by making a request to https://randomuser.me/api/. The JSON response that we receive in the following format.
Next you need to have an HTML file for the frontend where you want to display the retrieved data.
We can use either the “div” tag (block-level) or the “span” tag (inline-level), which will act as a place holder for the information. Using the “id” attribute, we can get the required “div/span” container where we want to place the information.
The script tag will contain the code that will make the API request and handle the response. This needs to be placed within the body tag or as a separate file.
We use the async/await function that basically ensure that the data is displayed even after the page is loaded.
You can use console.log(…) method to check if the user is retrieving correct piece of information. The output for the same can be seen by opening the console window in your web browser (Right Click -> Inspect -> Console or Ctrl+Shift+J in Chrome/Edge).
Final code: It is the combination of the above code sections.
Want to explore the APIs more and dive deeper into it, Refer Public APIs that has a vast collection of publicly available APIs to fuel your API exploration journey.
To test an API for the type of response it gives Postman is an amazing application that will fulfill all your needs. You can use Postman API development article to get an insight into, how to use it. Another alternative is, Postman APIs which will help you do the same task on the browser itself.