Task 16: Data fetching

[yogeshtakeo]

Full Stack Development Bootcamp - Handling Promises with JSONPlaceholder API Endpoint

Task Description

In this task, you will practice handling promises in JavaScript by making API requests to the JSONPlaceholder API endpoint. You will use the fetch() function to retrieve data, handle promise resolution and rejection using then() and catch(), and display relevant data from the API response.

Prerequisites

Before you begin, ensure you have the following resources:

• A code editor
• A web browser or Node.js for running JavaScript code

Task Steps

Step 1: Understanding Promises

1. Review the concept of promises in JavaScript.
2. Understand how promises play a crucial role in managing asynchronous operations.

Step 2: Explore JSONPlaceholder API

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

Step 3: Make API Request and Handle Promise

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

Step 4: Handle Promise Rejection

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

Step 5: Test and Refine

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

Task Submission

1. Take a screenshot of your code running in a web browser or Node.js displaying the API response.
2. Share the screenshot for evaluation.
3. Optionally, submit the code file (e.g., api.js) used for the task to your GitHub repository.

[Youngbikalp]

Name: Bikalp Timalsina Task 16: Data fetching Git Url: https://github.com/Youngbikalp/Task-16-Data-fetching

[shantibasnet]

Name: Shanti Basnet Task 16: Data fetching URL:: https://github.com/shantibasnet/dataFetching

[sansubed]

Name: Santona Subedi Task 16: Data fetching github repo url: https://github.com/sansubed/ReactViteAppTask16.git

[mbasnet123456]

Name: Manoj Basnet Task 16: Data fetching github repo url:https://github.com/mbasnet123456/Task-16-Data-fetching

[Madhv98]

Name: Madhav Dhital Task 16 Data fetching git hub: https://github.com/Madhv98/task-16-Data-fetch.git

[aniltimalsina]

Name: Anil Timalsina [Task 16: Data fetching] Github URL: https://github.com/aniltimalsina/promise-handling

[Narayanadhikari9]

Name: Narayan Adhikari Task 16: Data Fetching GitHub Url: https://github.com/Narayanadhikari9/Data-fetching1

[raj-maharjan99]

Task 16 Raj Kumar Maharjan