如何正确实现异步/等待答案

【问题标题】：How to properly implement async/await如何正确实现异步/等待
【发布时间】：2018-02-13 16:12:19
【问题描述】：

我不熟悉使用 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，我希望每个函数仅在前一个函数正确返回数据后运行。但是，运行上述内容会使页面崩溃，我无法进行任何调试，因为它只是崩溃了。我哪里错了？

【问题讨论】：

标签： javascript json asynchronous async-await

【解决方案1】：

您不会在 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 是否合适，因为在浏览器中对它的支持仍然非常脆弱和难看。

【讨论】：