如何正確實現異步/等待

我是新來使用async/await - 我試圖從API調用返回數據並格式化/稍微清理它。如何正確實現異步/等待

由於函數的異步性質，我真的很努力地研究如何使這項工作。如果沒有瀏覽器的簡單翻版，我無法承諾工作。

我的第一個函數調用API並獲取響應爲JSON。然後我保存這個數據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; 
    }); 
}

我的第二個函數接受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我打算每個功能僅一旦數據已經從以前的正常運行返回。然而，運行上述崩潰的頁面，我不能做任何事情來調試，因爲它只是崩潰。我哪裏錯了？

來源

2017-09-05 Francesca

你不要在你的getRecs()函數返回任何東西（你只返回在回調到fetch()調用）

由於您使用async-await其他地方，爲什麼不使用的getRecs()功能太？：

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()調用本身：

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

瀏覽器崩潰的原因是因爲topThreeArray()中的for循環中的條件很奇怪（i < i <= 3）並導致無限循環。
基本上，i < i的計算結果爲false，它被隱式強制轉換爲0，所以條件有效地變爲0 <= 3，這總是正確的。

最後，我想指出的是，您應該仔細考慮在瀏覽器中運行時首先是否適合async-await，因爲對它的支持在瀏覽器中仍然非常脆弱和靈活。

來源

2017-09-05 11:30:35

如何正確實現異步/等待

回答

相關問題