Promise.全てとPromise.race

Promise.all

原理は、複数のPromiseインスタンスを新しいPromiseインスタンスにパッケージし、成功したときに結果配列を返し、失敗したときにrejectに最初に失敗した状態の値を返す.

一般的な使用シーンページでは、2つ以上のajaxのデータが戻ってくるのを待つ必要があります.これまではloadingのみが表示されていました.

用法

let p1 = new Promise((resolve,reject) => {
    resolve('  ')
})
let p2 = new Promise((resolve,reject) => {
    resolve('success')
})
let p3 = Promise.reject('  ')
Promise.all([p1,p2]).then((result) => {
    console.log(result) // ['  ','seccess']
}).catch((error) => {
    console.log(error)
})
Promise.all([p1,p3]).then((result) => {
    console.log(result) 
}).catch((error) => {
    console.log(error)//['  ']
})

⚠️注意:成功時に受信した配列の順序はallパラメータ内の配列の順序であり、すなわちp 1の結果が前であっても、p 1の結果がp 2の結果より遅れて取得されてもよい.これにより、フロントエンドのデータ使用において、複数のリクエストを送信し、リクエストの順序に従ってデータを取得して使用するシーンに遭遇する場合がある.allはこの問題を解決することができる.
Promise.race

原理のいずれかが正常に戻った後、完了してもプロセスはすぐに停止しません.

の一般的な使用シーンでは、非同期操作とタイマを一緒に配置する、タイマが先にトリガされると、タイムアウトとみなされ、ユーザに通知する.例えば、微信の地理的位置情報を取得し、タイムアウトした場合、ユーザに注意し、この場合、地理的微信を取得して他の操作を行うことができない.

用法

let p1 = new Promise((resolve,reject) => {
 setTimeout(() => {
 resolve('   ')
 },2000);
})
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
})