Fetch API Basics

fetch() makes HTTP requests. Check response.ok because HTTP error statuses do not automatically reject the promise, then parse JSON or text as needed.

What you will learn

• Explain the purpose of fetch api basics in a real website.
• Read and adapt a working example instead of memorizing syntax.
• Test your result and recognize a common implementation mistake.

Understanding the concept

fetch rejects on network failures but not ordinary HTTP error status codes; check response.ok.

JavaScript adds logic and interactivity to web pages. Prefer const unless a variable needs reassignment; use let when it does.

This topic is part of the JavaScript learning track. Read the example carefully, identify each important element or statement, and try changing one part at a time. Small experiments help you see cause and effect.

Example 1: Working code

fetch("https://jsonplaceholder.typicode.com/users")
  .then(response => {
    if (!response.ok) throw new Error("HTTP error");
    return response.json();
  })
  .then(users => console.log(users.map(user => user.name)))
  .catch(error => console.error(error.message));

Open your browser Developer Tools (usually F12), select Console, paste the example and press Enter. Alternatively, put it in a script element in an HTML file.

How to understand this example

1. Identify the syntax introduced by this lesson.
2. Read the code from top to bottom and predict what it will do.
3. Run the code, then compare the result with your prediction.
4. Change one value, selector, or element and run it again.

Example 2: A small experiment

// Experiment: Fetch API Basics
const lessonNumber = 19;
console.log(`DevLearn JavaScript lesson ${lessonNumber}`);

This second example is a practice scaffold. It is not a replacement for the main example; combine the ideas to make a small working page or script.

Common mistakes and best practices

• Check the browser console for errors and use console.log while learning.
• Separate data, logic, and DOM updates to keep code understandable.
• Do not copy examples without understanding the result; inspect and test them.
• Prefer clear, descriptive names and simple code over unnecessary complexity.

Hands-on exercise

Your task: Fetch a list of sample users and show their names.

Extra challenge: Improve the example for a real DevLearn student portfolio or small business website. Explain your changes in two sentences.

Show exercise guidance

Adapt the first code example to meet the exercise, run it, inspect the result and handle at least one unexpected input.

Quick knowledge check

1. What problem does fetch api basics solve?
2. Which part of the main code example would you modify first?
3. How would you test that your change works?

Suggested answers

fetch rejects on network failures but not ordinary HTTP error status codes; check response.ok. The relevant part depends on your change; test by running the code and inspecting the result using the browser and its developer tools.

Next steps

Complete the exercise without copying the solution. Save your code in a folder named javascript-lesson-19, then continue to the next lesson in this track.