Task 9: Handling Promises with JSONPlaceholder API Endpoint

[yogeshtakeo]

Task 9: 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.

Task Submission

1. Take a screenshot of the web browser displaying the rendered React component .
2. Share the screenshot
3. Optionally, submit the code files (App.js and any other relevant files) for review with the GitHub Repositary.

[Namsla]

Namkhang Tsamchoe Git URL:https://github.com/Namsla/Task9.git

[babisha]

Babisha Manandhar Github Url: https://github.com/yogeshtakeo/task_BFD30.git

[KabinaThapa]

Kabina Thapa https://github.com/yogeshtakeo/task_BFD30/tree/kabinathapa

[ashmaupret100]

Name: Ashma Upreti

[sandessth]

Name: Sandesh Shrestha Git URL: https://github.com/yogeshtakeo/task_BFD30/tree/Sandesh/handling-promise

Console with error when wrong URL provided:

[Jharanatmg]

Jharana Github url - https://github.com/yogeshtakeo/task_BFD30.git

[junuthapa011]

Name: Junu Thapa Github URL: https://github.com/yogeshtakeo/task_BFD30/tree/junu

[dinakc]

Deena KC https://github.com/yogeshtakeo/task_BFD30.git

[sdhital12]

[sdhital12]

Name: sita Dhital GitUrl: https://github.com/sdhital12/task-9.git