ES 6---Promise基礎用法(all、race)詳細解二

前回に続き、reject、reolve、then、catchを言いました.次にPromiseの他の2つの方法all、raceを言います.
Promise.all()
簡単に言えば、allの役割は並行して複数の非同期動作を実行し、最後の非同期プログラムが終了したら、次の方法を継続することです.

Promise //  Promise.all   ，all        ，          Promise  。
    .all([runAsync1(), runAsync2(), runAsync3()])
    .then(function(data) {
        console.log(data); // [1, 2, 3]
    });

runAsync1(), runAsync2(), runAsync3()は前の文章で書いた方法です.もし分からないなら、この住所に行ってみてもいいです.https://mp.csdn.net/postedit/85089304
上記のコードによれば、3つの非同期プログラムが実行された後に、then方法のうちの1回はdata に戻り、3つの非同期プログラムの戻り値からなるセットを見ることができます.
方法は簡単です.この方法は現実にはどんな実用的なところがありますか?
ウェブページを開くときには、写真、フラッシュなどの様々なリソースを事前にロードします.すべてのロードが完了したら、ページの初期化を行います.
次に、allと似ているが、実行プロセスが異なる方法raceを見てみよう.
Promise.race()all方法の効果は実際には「誰が走るのが遅いのか、誰が正しいのか」という逆の方法があります.これはrace方法です.
raceの使い方:

Promise
   .race([runAsync1(), runAsync2(), runAsync3()])
   .then(function(data){
        console.log(data); // 1
    })

最初の方法が先に終了したので、プログラムはここでthen方法に実行され、1に戻る.
現実にはraceの使用も多いです.
raceである非同期要求にタイムアウト時間を設定し、タイムアウト後に対応する操作を実行できます.

/*---------- race      ----------------*/

    //         

    function requestImg() {
        var p = new Promise(function(resolve, reject) {
            var img =  new Image();
            img.src = 'http://www.google.cn/landing/cnexp/google-search.png';
            img.onload = function() {
                resolve(img)
            }
        });
        return p;
    }

    //     ，       
    function timeout() {
        var p = new Promise(function(resolve, reject) {
            setTimeout(function() {
                reject('    ')
            }, 5000)
        });
        return p;
    }

    Promise
        .race([requestImg(), timeout()])
        .then(function(data) {
            console.log(data);
            document.body.appendChild(data);
        })
        .catch(function(reason) {
            console.log(reason);
        })

画像のurlアドレスを存在しないアドレスに置き換えると、システムは404のエラーを報告し、次のcatchでエラー情報 を印刷します.