フロントエンド面接編---Promise複数のリクエストを実現し、データを取得してから他の非同期リクエストを実行する---ES 6のPromise


面接問題content?
卒业して初めて社会に出て、先端の面接は本当に経を取っているような気がして、文句を言わないで、しかもここ数日头の中で深い印象の面接问题を话します:
ES 6のPromiseによって1つの要求Aと1つの要求Bが実現され、データの取得に成功したと判断した後、Cまたは一連の要求を継続する必要がある.
ここでは、要求Aと要求Bとの間で非同期に実行する場合、要求Aと要求Bとの間に同期実行の関係がある場合、async、awaitまたはPromiseを使用することができる.all()とawait---後で調べてみますか?
Promiseって何?
非同期オペレーションを実現することができます.最も一般的なのは、非同期リクエストにカプセル化することです.
Promiseオブジェクトはコンストラクション関数で、3つのステータス表示があります.
  • pending:初期状態、進行中(ing...)
  • resolved(fullfilled):要求成功
  • rejected:要求失敗
  • 簡単なコードをください.
    //     req  ,   Promise    
    let req = function(...) {   //            ,  url   ,         
        // ...  
    
        return new Promise((resolve, reject) => {
            // ...  ,        
            if(success){   //     
                resolve(res)
            } else {
                reject(err)
            }
        })
    }
    
    //     
    req().then(res => {
        // ...                 
    }).catch(err => {
        //                   !
        console.log(err)
    })

    thenメソッドには2つのパラメータがあり、1つ目のパラメータはresolved(リクエスト成功)状態のコールバック関数であり、もう1つはrejected(リクエスト失敗)状態のコールバック関数(オプション)であり、catchコールバック関数を実行してrejected状態を表すことができる.一般的には、catchで失敗したコールバック関数を書くか、catchを書かなくてもよい
    本題が来た!
    では、複数の非同期リクエストに同期を追加するにはどうすればいいですか?
    //    promise  
    const pro1 = new Promise((resolve, reject) => {
        // ...  
    })
    const pro2 = new Promise((resolve, reject) => {
        // ...  
    })
    
    //   pro     resolved     reject            
    Promise.all([pro1, pro2]).then((res) => {
        // ...code          
        console.log(res)
    })

    Promise.all()
    最初のパラメータは、ArrayやStringのような反復可能なオブジェクトであり、前のすべてのオブジェクトが成功した後にのみ、成功したコールバック関数を実行できます.そうしないと、失敗したコールバック関数が実行されます.失敗したのは、最初の失敗したPromiseの結果であり、他のPromiseが完了したかどうかは関係ありません.