Issue with using fetch in JS

Question

Here's the code:

        but.addEventListener("click", () => {
        fetch("employees.json")
            .then(resp => {

                if (res.status >= 400) {
                    return Promise.reject();
                }
                console.log(resp);

                return resp.json();
                // const a = resp.json();
                // for (const worker of a) {
                //         const employee = AddDOMWorker(worker);
                //         res.appendChild(employee);
                //     }

            })
            .then(
                (emps) => {
                    for (const worker of emps) {
                        const employee = AddDOMWorker(worker);
                        res.appendChild(employee);
                    }
                }
            )
    });

    function AddDOMWorker(employee) {
        const div = document.createElement("div");
        div.classList.add("friend");
        div.textContent = `${employee.id} ${employee.position}`;
        return div;
    }

Why I should use .then after returning resp.json(). Why can't I just put resp.json() in a variable and get rid of the second .then (commented code)?

What happens when you try? Testing and observing is always more informative than asking. — David, Feb 05 '21 at 15:21

score 0 · Answer 1 · answered Feb 05 '21 at 15:18

0

Because json(), like all response methods, returns a Promise.

As such, like all promises, it is asynchronous, and must be either awaited, or used with a chained then() callback.

answered Feb 05 '21 at 15:18

Mitya

33,629
9
60
107

Yousaf · Accepted Answer · 2021-02-05T15:25:20.553

resp.json() returns a Promise, so you need to chain another .then() method call. Returning resp.json() from the callback function makes sure that the Promise returned by the wrapper then() method gets resolved to the promise returned by resp.json().

The Promise returned by the first then() method will either be rejected or fulfilled depending on what happens to the Promise returned by resp.json(). Callback function of the second then() method call is executed when the promise returned by the first then() method is fulfilled.

If you use async-await syntax, then you will need to await resp.json().

Issue with using fetch in JS

2 Answers2