fetch return Promise state: pending
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);
}
Related videos on Youtube
Stéphane R.
Updated on September 14, 2022Comments
-
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. about 7 yearsThank you Crowder :) I've replace .text() by .json(). Thank for the promise rejections too !
-
Stéphane R. about 7 yearsI've last question : why JSON.parse(response) don't work ? I must use .json() ?
-
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 whytext()
andjson()
and such return promises, because they need to read the entire response body. -
Stéphane R. about 7 yearsThank you very much for explaining this, I understand better! Have a good day .. :)