从 API 获取结果返回未定义

Question

我正在尝试从 API 获取数据，但结果一直未定义。我正在使用 promise.all 链接 API 调用，然后链接 promise 以对数据执行其他操作。我似乎无法将我的结果传递给 state。

这是有问题的代码：

if (gameDifficulty === "mixed") {
  const result = await Promise.all([
    fetchClient.getData(
      getEndpoint(
        `amount=${countValues[0]}&difficulty=easy&type=${questionType}`
      )
    ),
    fetchClient.getData(
      getEndpoint(
        `amount=${countValues[1]}&difficulty=medium&type=${questionType}`
      )
    ),
    fetchClient.getData(
      getEndpoint(
        `amount=${countValues[2]}&difficulty=hard&type=${questionType}`
      )
    ),
  ])
    .then(function (responses) {
      console.log(responses);
      console.log(result); //returns undefined
      return Promise.all(
        responses.map(function (response, idx) {
          return fetchClient.processData(response, "results");
        })
      );
    })
    .then(function (data) {
      console.log(data);

      console.log(result); // returns undefined
      return [...data[0], ...data[1], ...data[2]];
    });
}

Answer 1

使用async/await 语法使其变得简单。

避免将async/await 与then/catch 风格混用。

const getDataResponses = await Promise.all([
  fetchClient.getData(
    getEndpoint(
      `amount=${countValues[0]}&difficulty=easy&type=${questionType}`
    )
  ),
  fetchClient.getData(
    getEndpoint(
      `amount=${countValues[1]}&difficulty=medium&type=${questionType}`
    )
  ),
  fetchClient.getData(
    getEndpoint(
      `amount=${countValues[2]}&difficulty=hard&type=${questionType}`
    )
  ),
]);

const data = await Promise.all(
  getDataResponse.map((response) => {
    return fetchClient.processData(response, "results");
  })
);

console.log('getDataResponses', getDataResponses);
console.log('processDataResponse', data);
return [...data[0], ...data[1], ...data[2]];

Answer 2

在您的浏览器中转到您的网络选项卡发送一个 api 请求，看看它是否正在发送任何飞行前请求？

飞行前请求将具有 OPTIONS 方法，以便您识别它

Answer 3

由于result 直接从await 上的Promise 获取值，因此您可以使用它来代替.then()。

const responses = await Promise.all([
    fetchClient.getData(
        getEndpoint(
            `amount=${countValues[0]}&difficulty=easy&type=${questionType}`
        )
    ),
    fetchClient.getData(
        getEndpoint(
            `amount=${countValues[1]}&difficulty=medium&type=${questionType}`
        )
    ),
    fetchClient.getData(
        getEndpoint(
            `amount=${countValues[2]}&difficulty=hard&type=${questionType}`
        )
    ),
])

console.log('responses', responses);

const data = await Promise.all(
    responses.map(function (response, idx) {
        return fetchClient.processData(response, "results");
    })
);

console.log('data', data);
console.log([...data[0], ...data[1], ...data[2]]);

Answer 4

其他答案显示了如何更正代码，同时避免混淆承诺链和 await 运算符的使用。这个答案是关于为什么会出现 result 的未定义值：

 const result = await <promise chain>

在执行await 操作数之前为result 创建一个绑定。像所有简单的变量定义一样，它以 undefined 的值开始，并且由于它现在存在，因此在以后的代码中访问 result 不会产生错误。

promise 链的对象值是链中调用的最后一个 promise 方法（即then、catch 或finally）返回的promise。这是await 操作数在将其（成功）值作为await 表达式的值返回之前等待解决的承诺。

因此await 直到最后一个then 处理程序返回之后才返回要分配给result 的值，这意味着在匿名函数之后

.then(function (data) {
  console.log(data);

  console.log(result); // returns undefined
  return [...data[0], ...data[1], ...data[2]];
});

已完成执行并返回。在那之前，所有console.log(result) 调用记录undefined，因为没有分配给result。

---

TLDR；

附加到 Promise 的处理程序在它们附加到的 Promise 被履行或拒绝后，在事件循环的新调用中异步执行。

await 是一元运算符，能够保存执行状态并返回事件循环，直到其承诺操作数被确定。

贴出代码的操作顺序是

1. 定义result，初始化为undefined，并设置await操作符，获取第5步then返回的promise结果。

2. 发出三个端点数据请求。

3. 使用Promise.all 从步骤 2 中获取一组响应。

4. （然后）使用Promise.all从步骤3的结果中异步获取数组中每个响应的过程数据数组。

5. （然后）展平第 4 步中的数据数组并返回展平后的数组

6. （然后）await 运算符获取带有第 5 步结果的回调，并将其作为 await 表达式的值返回

7. 从第 6 步返回的值用于初始化 const result 声明。从语法上讲，这发生在 const result 语句结束之前，但实际上已经分散到多个网络请求和事件循环调用所需的时间。