Why does fetch() not reject on HTTP 404 or 500 errors?

fetch() only rejects on genuine network failures (like loss of internet connection, DNS resolution failure, or CORS blockage). For HTTP 404 Not Found or 500 Server Errors, the promise resolves successfully; you must manually verify if (response.ok) is true.

Why is a two-step await required with fetch()?

Step 1: await fetch(url) waits for the HTTP response headers to arrive. Step 2: await response.json() reads and parses the remaining streaming body data to completion.

JavaScript Fetch API: HTTP Requests, Response Streams & REST APIs

The Fetch API provides a modern, promise-based interface for fetching network resources across the web. It completely replaces the cumbersome legacy XMLHttpRequest API, integrating seamlessly with async/await and modern JSON REST architectures.

JavaScript Fetch API and Async/Await HTTP Request Flow

Figure 10: Step-by-step HTTP Request Lifecycle using modern Fetch API and Async/Await.

1. Making HTTP GET Requests with Status Verification

async function getStudentDirectory() {
    try {
        const response = await fetch("https://api.veewom.com/students");
        
        // CRITICAL CHECK: Always verify response.ok!
        if (!response.ok) {
            throw new Error(`HTTP Network Error: ${response.status} ${response.statusText}`);
        }
        
        // Stream reading & JSON deserialization
        const students = await response.json();
        console.log("Students Loaded Successfully:", students);
        return students;
    } catch (err) {
        console.error("Fetch request failed:", err.message);
    }
}

2. Making HTTP POST Requests with JSON Payloads

To transmit new records to a server, specify the HTTP method, request headers, and serialized body:

async function createNewStudent(studentPayload) {
    try {
        const response = await fetch("https://api.veewom.com/students", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Authorization": "Bearer token_xyz_123"
            },
            body: JSON.stringify(studentPayload) // Must serialize to string!
        });

        if (!response.ok) {
            throw new Error(`Failed to create record. Status: ${response.status}`);
        }

        const newRecord = await response.json();
        console.log("Student Record Created:", newRecord);
        return newRecord;
    } catch (error) {
        console.error("Submission failed:", error.message);
    }
}