JAvascript非同期のPromise.all()、Promise.race()、Promise.finally()

同期非同期シリーズの文章はjavascript非同期javascript非同期中のコールバックjavascript非同期とpromisejavascript非同期のPromiseについて話すことをお勧めします.resolve()、Promise.reject()javascript非同期のPromise thenとcatch javascript非同期のasync(一)javascript非同期のasync(二)javascript非同期実戦javascript非同期総括アーカイブ
今日はpromiseネットワーク上でPromiseAPIで使用されている文章の多くについて議論し続けます.javascript非同期シリーズの文章の完全性を維持するために、promiseのAPIについて簡単に全面的に紹介します.
準備作業
easy-mockに3つのインタフェースを追加しましたが、axiosを使用してajaxリクエストを行う代わりに
Promise.all()
Promise.all()は少し「並行」に似ています栗を見てみましょう

  
  
  
  
  



  
    {
      const p1 = axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/promise1')
        .then(({
          data
        }) => {
          console.log('p1   ');
          return data.data
        })

      const p2 = axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/promise2')
        .then(({
          data
        }) => {
          console.log('p2   ');
          return data.data
        })

      const p3 = axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/mock')
        .then(({
          data
        }) => {
          console.log('p3   ');
          return data.data
        })

      const p = Promise.all([p3, p1, p2])
        .then(arr => {
          console.log(arr);
          console.log('Promise.all   ');   
        })
        .catch(err=>{
          console.log(err,'Promise.all  ');
        })
    }
  

axiosがpromiseオブジェクトを返すことを知っています.

 console.log(p1);

Promise.allは、複数のPromiseインスタンスを新しいPromiseインスタンスにパッケージするためのPromiseである.all、パラメータとして配列を受信し、配列の各項目はPromiseインスタンスに戻ります.このコードを重点的に見てみましょう.

     const p = Promise.all([p3, p1, p2])
        .then(arr => {
          console.log(arr);
          console.log('Promise.all   ');   
        })
        .catch(err=>{
          console.log(err,'Promise.all  ');
        })

p 1,p 2,p 3はいずれもpromiseインスタンス,Promiseを返す.彼らの実行順序には関心がありません.もし彼らが成功した状態に戻ったら、Promise.allは成功した状態を返して、1つの配列を出力して、この3つのp 1,p 2,p 3の戻り値で、配列の順序は彼らの実行順序とは関係なく、彼らがパラメータとして並べた順序と関係があります.私たちは出力がインタフェース3の戻り時間を長くするためにインタフェース3のデータを修正しました.戻り値は長さ1000-2000の間のランダムな配列です.だからp 3の実行はp 1とp 2より遅くなりますが、私たちが出力したarr、p 3は依然として前にあります.これは私たちに便利さをもたらします.戻り値配列の順序は方法の実行順序とは関係なく、人為的に制御することができます.私たちはp 1を変更して、p 1を間違って報告することができます.

 const p1 = axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/promise1')
        .then(({
          data
        }) => {
          console.log('p1   ');
          return xxxx.data// data.data   xxxx.data
        })

戻り失敗(reject)がある場合はPromise.allは失敗(reject)の状態を返し,このとき最初にrejectされたインスタンスの戻り値はPのコールバック関数に渡される.3つのpromiseインスタンスパラメータの間には「と」の関係があり、すべて成功しました.Promise.全ては成功に戻る失敗があるallは失敗を返して角度を変えて、1つのpromiseの実行結果は他のいくつかのpromiseの実行結果に依存して、例えば:いくつかのajaxはすべて実行し終わって、やっとページをレンダリングすることができて、いくつかのajaxはすべて実行し終わって、やっといくつかのデータの計算操作をすることができて、実行の順序に関心がなくて、ただ集団の実行結果に関心を持ちます
Promise.race()
Promiseの競合、使い方、Promise.all類似、対応パラメータの要求とPromise.all同様に、パラメータとして配列が入力され、パラメータがPromiseインスタンスraceを返すのは競合の意味であり、配列内のPromiseインスタンスは、実行が速い人は、成功しても失敗しても、実行結果を返します.

const p = Promise.race([p3, p1, p2])
        .then(res => {
          console.log(res);
          console.log('Promise.all   ');   
        })
        .catch(err=>{
          console.log(err,'Promise.all  ');
        })

出力によりp 1が最初に完了したことが分かったので,pの戻り結果はp 1の実行結果であり,完了してもプロセスはすぐに停止せず,実行を継続する.
raceの使用シーンについて
検索してみると、ネットのタイムアウトを解決するためのヒントという文章が多くありますが、以下のように

      const p3 = axios.get('https://easy-mock.com/mock/5b0525349ae34e7a89352191/example/mock')
        .then(({
          data
        }) => {
          console.log('p3   ');
          return data.data
        })
      const p4 = new Promise(function (resolve, reject) {
        setTimeout(() => reject(new Error('      ')), 50)
      })
     const p = Promise.race([p3, p4])
        .then(res => console.log(res))
        .catch(err => console.log(err));

p 3のajaxは50 msのタイマと比較して、誰が実行するのが速いかを見て、50 msを超えて、p 3のajaxがまだ帰っていない場合は、ユーザーにネットワーク接続のタイムアウトがあることを知らせます.ここに問題があります.タイムアウトが提示されても、p 3はまだ実行を続けています.それは停止していません.ステータスがあるまで、ajax要求の時間の範囲を画定することができます.ajaxリクエストがxxxmsを超えるとメソッドが実行されるか、ajaxリクエストがxxmsを超えないとメソッドが実行されるか、つまりraceの応用空間は大きくありません
Promise.finally()
finallyメソッドは、Promiseオブジェクトの最後のステータスにかかわらず実行されるアクションを指定します.この方法はES 2018が標準を導入したものである.

      const p = Promise.race([p3, p4])
        .then(res => console.log(res))
        .catch(err => console.log(err))
        .finally(() => {
          console.log("finally        ")
        });

promiseがステータス(成功または失敗にかかわらず)を取得するとfinallyが実行され、
テキストリンク
参照リンクPromiseオブジェクトPromise.prototype.finally