Question

我是使用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我希望每个函数只在从前一个数据中正确返回数据后运行。但是运行以上命令会导致页面崩溃，我无法进行任何调试，因为它只是崩溃了。我哪里错了？

Answer 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) => {
  ...

浏览器崩溃的原因是因为for中topThreeArray()循环中的条件很奇怪（i < i <= 3）并导致无限循环。
基本上，i < i评估为false，后者被隐式强制转换为0，因此条件实际上变为0 <= 3，这始终是真的。

最后，我想指出，在浏览器中运行时，首先应该仔细考虑async-await是否合适，因为对它的支持在浏览器中仍然非常脆弱和混乱。

如何正确实现async / await

1 个答案: