| [ Web Proxy ] |
| Viewing: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/async_function | [Back] [Original] |
Get to know MDN better
function resolveAfter2Seconds() {
return new Promise((resolve) => {
setTimeout(() => {
resolve("resolved");
}, 2000);
});
}
async function asyncCall() {
console.log("calling");
const result = await resolveAfter2Seconds();
console.log(result);
// : "resolved"
}
asyncCall();
async function name(param0) {
statements
}
async function name(param0, param1) {
statements
}
async function name(param0, param1, /* , */ paramN) {
statements
}
nameparam statements await
async function AsyncFunction (Promise)
await await await async await try / catch
:
await JavaScript SyntaxError
await JavaScript
async function foo() {
return 1;
}
function foo() {
return Promise.resolve(1);
}
Promise.resolve Promise.resolve
const p = new Promise((res, rej) => {
res(1);
});
async function asyncReturn() {
return p;
}
function basicReturn() {
return Promise.resolve(p);
}
console.log(p === basicReturn()); // true
console.log(p === asyncReturn()); // false
0 await await await await
:
async function foo() {
await 1;
}
function foo() {
return Promise.resolve(1).then(() => undefined);
}
await .then
2 foo 3
foo foo foo await 1 result1 2 await foo foo 2 2 await 2 result2 return undefined async function foo() {
const result1 = await new Promise((resolve) =>
setTimeout(() => resolve("1")),
);
const result2 = await new Promise((resolve) =>
setTimeout(() => resolve("2")),
);
}
foo();
.catch p1 p2
async function foo() {
const p1 = new Promise((resolve) => setTimeout(() => resolve("1"), 1000));
const p2 = new Promise((_, reject) =>
setTimeout(() => reject(new Error("failed")), 500),
);
const results = [await p1, await p2]; // Promise.all Promise.allSettled
}
foo().catch(() => {}); // ...
async function function
function resolveAfter2Seconds() {
console.log("starting slow promise");
return new Promise((resolve) => {
setTimeout(() => {
resolve("slow");
console.log("slow promise is done");
}, 2000);
});
}
function resolveAfter1Second() {
console.log("starting fast promise");
return new Promise((resolve) => {
setTimeout(() => {
resolve("fast");
console.log("fast promise is done");
}, 1000);
});
}
async function sequentialStart() {
console.log("== sequentialStart ==");
// 1.
const slow = resolveAfter2Seconds();
console.log(await slow);
// 2.
const fast = resolveAfter1Second();
console.log(await fast);
console.log("== sequentialStart ==");
}
async function sequentialWait() {
console.log("== sequentialWait ==");
// 1. 2
const slow = resolveAfter2Seconds();
const fast = resolveAfter1Second();
// 2. slow
console.log(await slow);
// 3. fast
console.log(await fast);
console.log("== sequentialWait ==");
}
async function concurrent1() {
console.log("== concurrent1 ==");
// 1. 2
const results = await Promise.all([
resolveAfter2Seconds(),
resolveAfter1Second(),
]);
// 2.
console.log(results[0]);
console.log(results[1]);
console.log("== concurrent1 ==");
}
async function concurrent2() {
console.log("== concurrent2 ==");
// 2 jobs
await Promise.all([
(async () => console.log(await resolveAfter2Seconds()))(),
(async () => console.log(await resolveAfter1Second()))(),
]);
console.log("== concurrent2 ==");
}
sequentialStart(); // 2 "slow" 1 "fast"
//
setTimeout(sequentialWait, 4000); // 2 "slow" "fast"
//
setTimeout(concurrent1, 7000); // concurrentStart
//
setTimeout(concurrent2, 10000); // 1 "fast" 1 "slow"
sequentialStart await 2 2 await 1 2 3
sequentialWait await 3 2
await 2 await 1
Promise.all() Promise.allSettled()
:
sequentialWait concurrent1
sequentialWait fast slow catch
concurrent1 Promise.all
Promise API
function getProcessedData(url) {
return downloadData(url) //
.catch((e) => downloadFallbackData(url)) //
.then((v) => processDataInWorker(v)); //
}
1
async function getProcessedData(url) {
let v;
try {
v = await downloadData(url);
} catch (e) {
v = await downloadFallbackData(url);
}
return processDataInWorker(v);
}
catch()
async function getProcessedData(url) {
const v = await downloadData(url).catch((e) => downloadFallbackData(url));
return processDataInWorker(v);
}
2 await return Promise.resolve
| ECMAScript 2027 LanguageSpecification # sec-async-function-definitions |
AsyncFunctionasync function functionfunction*async function*awaitPromise| Web Proxy Viewer | New URL | Original Page |