適切非同期/待つ

Question

を実装するためにはどうすればasync/awaitを使用してに新しいです - 私は少しそれ整頓/ APIの呼び出しやフォーマットのデータを返すようにしようとしています。

私は本当にための関数の非同期性のこの作品を作る方法を考え出すのに苦労しています。私は、単にブラウザが落ちることなく働くという約束を得ることはできません。

私の第一の機能はAPIを呼び出し、JSONとしてレスポンスを取得します。私はその後、私の第二の機能はjson.recommendationsを取り、不要なデータを削除し、データ、私のフィルタに一致するものの新しい配列を返すために、いくつかの以降の整理整頓をしjson.recommendations

function getRecs() { 
    const requestUrl = `blahblah`; 
    const options = { 
     headers: { 
      'Content-type': 'application/json', 
      Accept: 'application/json', 
     }, 
     method: 'GET', 
    }; 

    fetch(requestUrl, options).then((res) => { 
     if (res.ok) { 
      return res.json(); 
     } 
     throw new Error('Error!!??', res); 
    }).then((json) => { 
     return json.recommendations; 
    }); 
} 

このデータのサブセットを格納します。

async function getInStockRecs() { 
    const recs = await getRecs(); 
    if (recs !== undefined) { 
     return recs.filter(function(rec){ 
      return rec.isInStock === true; 
     }); 
    } 
} 

第三の機能は、データをフォーマット

async function topThreeArray() { 
    const inStockRecs = await getInStockRecs(); 
    const topThree =[]; 
    for (let i = 0; i < i <= 3; i++) { 
     topThree.push(inStockRecs[0]); 
    } 
    return topThree; 
} 

awaitを使用することにより、私は、データが以前から適切に戻された後にのみ実行する各機能を意図しました。しかし、上記のページをクラッシュすると、単にクラッシュするので、私はデバッグするために何もできません。どこが間違っていますか？あなたが他の場所でasync-awaitを使用しているので、あなたは（あなたが唯一のfetch()コールへのコールバックに戻る）あなたのgetRecs()機能に

を何も返さない

Answer 1

、なぜあまりにもgetRecs()機能のためにそれを使用しない？：

return fetch(requestUrl, options).then((res) => { 
    ... 

：

async function getRecs() { 
    const requestUrl = `blahblah`; 
    const options = { 
    headers: { 
     'Content-type': 'application/json', 
     Accept: 'application/json', 
    }, 
    method: 'GET', 
    }; 

    const res = await fetch(requestUrl, options); 
    if (res.ok) { 
     return res.json().recommendations; 
    } 
    throw new Error('Error!!??', res); 
} 

そうしないと、あなたはfetch()コール自体を返却する必要があると思いますtopThreeArray()でforループの条件が変（i < i <= 3）、無限ループでの結果であるため、ブラウザがクラッシュ

理由があります。
i < iは、と評価されます。暗黙的に強制的に0に強制されるため、条件は実質的に0 <= 3になります。これは常にtrueです。

最後に、ブラウザで実行しているときに最初にasync-awaitが適切かどうかを慎重に検討する必要があることを指摘したいと思います。これは、ブラウザではまだ非常に脆弱でスケッチです。