Vue.jsのサーバーへのチェーン要求

Question

異なるAPIエンドポイントに対して2つの非同期呼び出しを行う必要があるとします。 2回目の呼び出しのクエリパラメータは、私が最初の1

クイック概要から受け取るものに依存します。

• まずエンドポイントは、特定の順序でいくつかのIDを提供し

• セカンド（例えば、評価順にソート）

  ：エンドポイントは、これらのID

エンドポイントの例について、いくつかの「メタ情報」を提供します

GET /エンドポイント/ 1

応答形式：

[ 
    { 
    id: 1, 
    rating: 0.67 
    }, 
    { 
    id: 2, 
    rating: 0.51 
    }, 
    { 
    id: 3, 
    rating: 0.45 
    }, 
    ... 
] 

GET /エンドポイント/ 2、ID = 1,2

// I receive those ids from call to the first endpoint 

応答形式：

[ 
    { 
    id: 1, 
    gender: "male", 
    age: 20, 
    profession: "Programmer" 
    }, 
    { 
    id: 2, 
    gender: "transgender", 
    age: 27, 
    profession: "ML Engineer" 
    } 
] 

その後、私はクレートに鍵を決めた私は私が持っていると私のテンプレートにメタ情報を表示するすべてのIDをループする必要があるが、それはエンドポイント/ 1

の応答にあったように順序が同じでなければなりません。これらのニーズに対応するvalのストレージ、すなわち：

const storage = { 
    1: { 
    gender: "male", 
    age: 20, 
    profession: "programmer" 
    } 
} 

も、私はすなわち、最初のエンドポイントからの人物との変数を持っている：

const persons = [ 
    { 
    id: 1, 
    rating: 0.67 
    }, 
    ... 
] 

ので、私のテンプレートで、私は

のようになめらかに行うことができます

<p v-for="p in persons">{{ storage[p.id].gender }}</p> 

質問は次のとおりです。私は要求を開始する関数を呼び出した後、すべてのデータを利用できるようにするためにどのようにチェーン化できますか？

* 2番目のエンドポイントには2つのIDのみを照会できるため、それぞれのIDのリストをループして、それぞれを個別に呼び出す必要があります。実際のアプリでは、私が最初のエンドポイントから〜100個のIDを持っているので、私は二番目の

Answer 1

に〜50回の呼び出しを行う必要がある。ここの例である：https://jsfiddle.net/lucaskatayama/qxyn1rp1/3/

実は、それはVueJSの問題ではありません。これは、によって解決される非同期問題です。またはコールバック、ou 非同期/ AwaitをJavascriptで解決しました。

私の例では、私はPromisesを使って解決しました。

私は、タイムアウトを作成し、それが完了したときに約束を返す要求をシミュレートします。 Axiosは同じことをします。

プロミスが解決するときは、.thenを使用して連鎖し、別の関数を渡して2番目の要求を呼び出すことができます。その後、次にしてください。あなたが望むようあなたが別のリストを要求し、返されたデータに基づいて、別の要求を作成し、応答を使用することができますthenインサイド

など

リクエストの多い行うために、私は限界までasyncライブラリを使用して好みます時間当たりの要求の数。