fetch return Promise state: pending

18,391

I think the problem become asynchrone/synchrone method ?

Yes. You've (mostly) correctly consumed the original fetch() promise, but text() also returns a promise. So:

users.then(response => response.text()) // 1
     .then(json => {                    // 2
          console.log(json);
     })
     .catch(error => {                  // 3
          // handle error
     });

fetch("https://jsonplaceholder.typicode.com/users")
.then(response => response.text())      // 1
     .then(json => {                    // 2
          log("typeof json: " + typeof json);
          log(json);
     })
     .catch(error => {                  // 3
          // handle error
     });

function log(msg) {
  var p = document.createElement("pre");
  p.appendChild(document.createTextNode(msg));
  document.body.appendChild(p);
}

At #1 above, we respond to the successful resolution of the fetch() promise by starting the process of reading the body text, returning the promise from text().

At #2 above, we respond to the successful resolution of text()'s promise by using the resulting text (a string containing JSON).

At #3 above, we handle an error from either the original fetch() or the text() promise by doing something with it.

Always be sure to handle promise rejections. If you don't, they're unlike unhandled exceptions. They're reported to the console, and some environments (like recent versions of Node) terminate on unhandled rejections.


Since you're requesting JSON, you might want to use json() rather than text() so you both read and parse it:

users.then(response => response.json())
     .then(arrayOfUsers => {
          console.log(arrayOfUsers);
     })
     .catch(error => {
          // handle error
     });

fetch("https://jsonplaceholder.typicode.com/users")
.then(response => response.json())
     .then(arrayOfUsers => {
          log("typeof arrayOfUsers: " + typeof arrayOfUsers);
          log("arrayOfUsers.length: " + arrayOfUsers.length);
     })
     .catch(error => {                  // 3
          // handle error
     });

function log(msg) {
  var p = document.createElement("pre");
  p.appendChild(document.createTextNode(msg));
  document.body.appendChild(p);
}
Share:
18,391

Related videos on Youtube

Stéphane R.
Author by

Stéphane R.

Updated on September 14, 2022

Comments

  • Stéphane R.
    Stéphane R. over 1 year

    I test the fetch API with jsonplaceholder URL, but my function returns "Promise State: Pending", and I don't understand why :

    function getUsers(url) {
      return fetch(url)
    }
    
    const users = getUsers(`https://jsonplaceholder.typicode.com/users`);
    
    users.then(response => {
      console.log(response.text());
    });
    

    I think the problem is because of asynchronous/synchronous methods?

  • Stéphane R.
    Stéphane R. about 7 years
    Thank you Crowder :) I've replace .text() by .json(). Thank for the promise rejections too !
  • Stéphane R.
    Stéphane R. about 7 years
    I've last question : why JSON.parse(response) don't work ? I must use .json() ?
  • T.J. Crowder
    T.J. Crowder about 7 years
    @StéphaneR.: response isn't a string, it's an object that lets you get various pieces of information about the response (including headers, status, etc.). You receive it when enough of the response has been received to give you useful information, which may be before the entire body of the response is received. That's why text() and json() and such return promises, because they need to read the entire response body.
  • Stéphane R.
    Stéphane R. about 7 years
    Thank you very much for explaining this, I understand better! Have a good day .. :)