Published Oct 16, 2019
[
The word “async” before a function means one simple thing: a function always return a promise. Other values are wrapped in a resolved promise automatically.
async function f() {
return 1;
}
f().then(alert); // 1
is the same as
async function f() {
return Promise.resolve(1);
}
f().then(alert); // 1
The keyword await makes JavaScript wait until that promise settles and return its
result.
async function f() {
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("done!"), 1000)
});
let result = await promise; // wait till the promise resolves (*)
alert(result); // "done!"
}
f();
async function showAvatar() {
// read our JSON
let response = await fetch('/article/promise-chaining/user.json');
let user = await response.json();
// read github user
let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);
let githubUser = await githubResponse.json();
// show the avatar
let img = document.createElement('img');
img.src = githubUser.avatar_url;
img.className = "promise-avatar-example";
document.body.append(img);
// wait 3 seconds
await new Promise((resolve, reject) => setTimeout(resolve, 3000));
img.remove();
return githubUser;
}
showAvatar();
async function f() {
await Promise.reject(new Error("Whoops!"));
}
is the same as
async function f() {
throw new Error("Whoops!");
}
We can catch that error using try..catch.
async function f() {
try {
let response = await fetch('https://no-such-url');
} catch(err) {
alert(err); // TypeError: failed to fetch
}
}
f();
If we don’t have try..catch, then the promise generated by the call of the async
function f() becomes rejected. We can append .catch to handle it
async function f() {
let response = await fetch('https://no-such-url');
}
// f() becomes a rejected promise
f().catch(alert); // TypeError: failed to fetch // (*)
References: