Pomise.all の使用:
Promise.all は、複数の Promise インスタンスを新しいPromiseインスタンスにラップできます。同時に成功と失敗の戻り値も異なり、成功した場合は結果の配列を返し、失敗した場合は最初に拒否された値を返します。
具体的なコードは次のとおりです。
let p1 = new Promise((resolve, reject) => {
resolve('成功了')
})
let p2 = new Promise((resolve, reject) => {
resolve('success')
})
let p3 = Promse.reject('失败')
Promise.all([p1, p2]).then((result) => {
console.log(result) //['成功了', 'success']
}).catch((error) => {
console.log(error)
})
Promise.all([p1,p3,p2]).then((result) => {
console.log(result)
}).catch((error) => {
console.log(error) // 失败了，打出 '失败'
})
Promse.all は、複数の非同期プロセスを処理する場合に非常に便利です。たとえば、ページは通常に表示される前に 2 つ以上の ajax データが返されるまで待つ必要があります。その前に、読み込みアイコンのみが表示されます。
コードモック:
let wake = (time) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(`${
time / 1000}秒后醒来`)
}, time)
})
}
let p1 = wake(3000)
let p2 = wake(2000)
Promise.all([p1, p2]).then((result) => {
console.log(result) // [ '3秒后醒来', '2秒后醒来' ]
}).catch((error) => {
console.log(error)
})
Promise.all によって取得された成功した結果の配列内のデータの順序は、Promise.all によって受け取られた配列の順序と一致していることに注意することが重要です。つまり、p1 の結果が最初にくるということです。 p1 は p2 よりも後に取得されます。これは大きな利点をもたらします。データをリクエストするフロントエンド開発のプロセスで、複数のリクエストが送信され、リクエストの順序に従ってデータが取得および使用されるシナリオが時折ありますが、Promise.all を使用すると、間違いなくこの問題を解決できます。
Promise.race の使用:
名前が示すように、Promse.race はレースを意味します。これは、Promse.race([p1, p2, p3]) の結果がすぐに取得されると、結果自体が成功状態であるかどうかに関係なく、その結果が返されることを意味します。または失敗した状態。
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('success')
},1000)
})
let p2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('failed')
}, 500)
})
Promise.race([p1, p2]).then((result) => {
console.log(result)
}).catch((error) => {
console.log(error) // 打开的是 'failed'
})
原理は非常に単純ですが、通常のプロジェクトで使用されるシナリオはそれほど多くありません。一般に、フロントエンドのロジックはそれほど複雑ではなく、人間味のあるバックエンドは一般に、そのインターフェイスを反映するだけでなく、非常に便利にインターフェイスを設計します。独自のテクノロジーだけでなく、フロントエンドの同僚からの苦情を防ぐためでもあります。