使用 fetch/async/await 无法获取预期数据

Question

来自 Jquery $.get，我试图重写一个获取 json 数据的函数。到目前为止，这就是我所做的：

async function get_highlights(){
  const mirespuesta = await fetch("/api/v1/gethighlights/"+network_number)
  .then(response => {
      if (!response.ok) {
          throw new Error("HTTP error " + response.status);
      }
      return response.json();
  })
  .then(json => {
      console.log(json) // --> here, I get the correct dara
      return json;
  })
  .catch(function () {
      this.dataError = true;
  })
  return mirespuesta
} // but I don't get that data returned 

但当我调用函数时我才得到这个：

它具有值，但我无法将它们返回或在我的应用程序的主要范围内使用。

我究竟做错了什么？

Answer 1

问题是你永远不会从你的函数中返回承诺链。所以你的async函数的返回值是一个用 实现的承诺undefined，就像一个async没有return返回的非函数一样undefined。

该代码还有另一个问题：如果您使用async函数，通常最好使用await而不是.then,.catch等。另外，不要在函数中捕获拒绝；相反，让调用者处理它，以便它知道出了问题。

例如：

async function get_highlights() {
    const response = await fetch("/api/v1/gethighlights/"+network_number);
    if (!response.ok) {
        throw new Error("HTTP error " + response.status);
    }
    return response.json();
}

但如果你真的想内联处理错误：

async function get_highlights() {
    const response = await fetch("/api/v1/gethighlights/"+network_number);
    if (!response.ok) {
        throw new Error("HTTP error " + response.status);
    }
    try {
        return await response.json();
    } catch { // Note: ES2019 allows optional `catch` bindings 
        this.dataError = true;
    }
}

但我再次不建议这样做，因为调用者必须检查他们是否收到数据或undefined承诺何时履行（或检查dataError，我猜:-)）。

旁注：请注意，在第一个示例中，我没有try/ catch，return response.json();但在第二个示例中，我做了/ ，其中return位于 / 内。原因是，当在函数顶层返回 Promise 时，和 之间没有有效的区别，但如果代码位于/之类的控制块中，则情况并非如此。如果承诺被拒绝，那么可以确保我们的块被执行。没有它并不能确保这一点。trycatchreturn await respohnse.json();return somePromisereturn await somePromisetrycatchawaitcatch