fetch response.text() returns pending promise

Question

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?

Answer 1

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);
}