从 javascript fetch 返回 JSON

Question

我正在尝试学习如何用 async 和 await 替换回调函数。两天后，我进行了以下工作，它将json从函数内部写入控制台。

const requestRoster = async ()=> {
    const response = await fetch('/testing/getRoster.php', {
        method: 'get',
        headers: {
            'Content-Type': 'application/json'
        }
    })
    const json = await response.json()
    console.log(json); // writes the array json to the console
    return json; //apparently returns a pending promise
}



然而，当我说

$roster = requestRoster();
console.log ($roster); // writes Promise{<pending}> to the console
​

控制台报告

承诺{} 当我展开这条线时，我看到：

Promise {<pending>}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: Array(64)

并且 Array(64) 包含我想要的数据。

显然我在这里有点迷路了。显然，函数 requestRoster() 正在返回一个未决的承诺。 我想要的是它返回 Array(64)。那么，我哪里错了？我只是想让 requestRoster() 返回 Array(64)

谢谢，

Answer 1

async 声明的函数返回一个承诺，即使您返回一个简单的值。如果你返回这样一个值，它会被包装到一个已经解析的 Promise 中，你可以读出已知的方法。

如果你在另一个异步函数中，你可以等待它。

$roster = await requestRoster();

在简单的函数或箭头函数中，您可以使用 promise 方法。

requestRooster().then( (roster) => { /* do something with rooster*/ } );

Answer 2

当您使用async 关键字时，该函数会自动返回Promise。

而await关键字用于等待promise解决。

你可以很容易地做到这一点：

$roster = await requestRoster();

但请注意，这只能在 async 本身的函数中完成。如果你想在顶层使用它，你可以像这样使用 IIFE（立即调用函数表达式）：

(async () => {
  $roster = await requestRoster();
  // do something with $roster here
})();

Answer 3

只需从该行中删除 await：

const json = await response.json()