yogeshtakeo commented 1 year ago

Handling Promises with JSONPlaceholder API Endpoint

Objective:

Practice handling promises by making API requests to the JSONPlaceholder API endpoint.

Task Overview

Understand promises and their role in asynchronous JavaScript. Make HTTP requests to the JSONPlaceholder API endpoint using fetch(). Handle promise resolution and rejection using then() and catch() methods. Extract and display relevant data from the API response.

Task Details

Understanding Promises:

Review the concept of promises in JavaScript. Understand the role of promises in handling asynchronous operations.

Explore JSONPlaceholder API:

Visit the JSONPlaceholder website: https://jsonplaceholder.typicode.com/ Familiarize yourself with the available API endpoints and the data they provide. Select an endpoint to work with for this task (e.g., /users, /posts, /comments, etc.).

Make API Request and Handle Promise:

Open a new JavaScript file in your project (e.g., api.js or any other file you create). Use the fetch() function to make a GET request to the chosen API endpoint. Handle the promise returned by fetch() using the then() and catch() methods. Extract the response data (JSON) from the resolved promise using the json() method. Display the response data (e.g., log it to the console or render it on a web page).

Handle Promise Rejection:

Simulate an error by modifying the API endpoint URL or introducing a network issue. Handle the rejected promise using the catch() method. Display an error message to indicate the failed API request.

Test and Refine:

Open your project in a browser or run your JavaScript file using Node.js. Verify that the API request is successful and the response data is correctly displayed. Test the error handling by introducing a deliberate error and checking if the error message is displayed.

Submission

Share the screenshots of your code and the rendered component in the issue's comment section of your GitHub repository. Make sure to include the GitHub repository URL in the comment.

Note: Feel free to use any additional JavaScript or CSS features or syntax to enhance your solution. Provide comments where necessary to explain your code.