以下の間に違いはありますか?
const [result1, result2] = await Promise.all([task1(), task2()]);
そして
const t1 = task1();
const t2 = task2();
const result1 = await t1;
const result2 = await t2;
そして
const [t1, t2] = [task1(), task2()];
const [result1, result2] = [await t1, await t2];
ベストアンサー1
注await
:この回答は、直列と間のタイミングの違いについてのみ説明していますPromise.all
。必ずお読みください@mikep の包括的な回答には、エラー処理のより重要な違いも含まれています。
この回答では、いくつかの例の方法を使用します。
res(ms)
ミリ秒の整数を受け取り、そのミリ秒後に解決する Promise を返す関数です。rej(ms)
ミリ秒の整数を受け取り、そのミリ秒後に拒否するプロミスを返す関数です。
を呼び出すとres
タイマーが開始されます。 を使用してPromise.all
いくつかの遅延を待機すると、すべての遅延が終了した後に解決されますが、同時に実行されることに注意してください。
例 1
const data = await Promise.all([res(3000), res(2000), res(1000)])
// ^^^^^^^^^ ^^^^^^^^^ ^^^^^^^^^
// delay 1 delay 2 delay 3
//
// ms ------1---------2---------3
// =============================O delay 1
// ===================O delay 2
// =========O delay 3
//
// =============================O Promise.all
async function example() {
const start = Date.now()
let i = 0
function res(n) {
const id = ++i
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
console.log(`res #${id} called after ${n} milliseconds`, Date.now() - start)
}, n)
})
}
const data = await Promise.all([res(3000), res(2000), res(1000)])
console.log(`Promise.all finished`, Date.now() - start)
}
example()
これは、Promise.all
3 秒後に内部のプロミスのデータで解決されることを意味します。
しかし、Promise.all
「失敗を早く認める」行動をとる:
例2
const data = await Promise.all([res(3000), res(2000), rej(1000)])
// ^^^^^^^^^ ^^^^^^^^^ ^^^^^^^^^
// delay 1 delay 2 delay 3
//
// ms ------1---------2---------3
// =============================O delay 1
// ===================O delay 2
// =========X delay 3
//
// =========X Promise.all
async function example() {
const start = Date.now()
let i = 0
function res(n) {
const id = ++i
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
console.log(`res #${id} called after ${n} milliseconds`, Date.now() - start)
}, n)
})
}
function rej(n) {
const id = ++i
return new Promise((resolve, reject) => {
setTimeout(() => {
reject()
console.log(`rej #${id} called after ${n} milliseconds`, Date.now() - start)
}, n)
})
}
try {
const data = await Promise.all([res(3000), res(2000), rej(1000)])
} catch (error) {
console.log(`Promise.all finished`, Date.now() - start)
}
}
example()
代わりにを使用するとasync-await
、各 Promise が順番に解決されるのを待つ必要があり、効率が悪くなる可能性があります。
例3
const delay1 = res(3000)
const delay2 = res(2000)
const delay3 = rej(1000)
const data1 = await delay1
const data2 = await delay2
const data3 = await delay3
// ms ------1---------2---------3
// =============================O delay 1
// ===================O delay 2
// =========X delay 3
//
// =============================X await
async function example() {
const start = Date.now()
let i = 0
function res(n) {
const id = ++i
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve()
console.log(`res #${id} called after ${n} milliseconds`, Date.now() - start)
}, n)
})
}
function rej(n) {
const id = ++i
return new Promise((resolve, reject) => {
setTimeout(() => {
reject()
console.log(`rej #${id} called after ${n} milliseconds`, Date.now() - start)
}, n)
})
}
try {
const delay1 = res(3000)
const delay2 = res(2000)
const delay3 = rej(1000)
const data1 = await delay1
const data2 = await delay2
const data3 = await delay3
} catch (error) {
console.log(`await finished`, Date.now() - start)
}
}
example()