GeezerVison is showing javascript.info — Rewrite using async/await
back to the lessonRewrite using async/await
Rewrite this example code from the chapter Promises chaining using async/await instead of .then/catch:
function loadJson(url) {
return fetch(url)
.then(response => {
if (response.status == 200) {
return response.json();
} else {
throw new Error(response.status);
}
});
}
loadJson('https://javascript.info/no-such-user.json')
.catch(alert); // Error: 404
The notes are below the code:
async function loadJson(url) { // (1)
let response = await fetch(url); // (2)
if (response.status == 200) {
let json = await response.json(); // (3)
return json;
}
throw new Error(response.status);
}
loadJson('https://javascript.info/no-such-user.json')
.catch(alert); // Error: 404 (4)
Notes:
-
The function loadJson becomes async.
-
All .then inside are replaced with await.
-
We can return response.json() instead of awaiting for it, like this:
if (response.status == 200) {
return response.json(); // (3)
}
Then the outer code would have to await for that promise to resolve. In our case it doesn’t matter.
-
The error thrown from loadJson is handled by .catch. We can’t use await loadJson(…) there, because we’re not in an async function.