从 javascript 获取返回 JSON

Question

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

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 {} 当我展开这条线时，我看到：

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

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

显然我在这里有点迷路了。 显然 function requestRoster() 正在返回待处理的 promise。 我想要的是它返回 Array(64)。 那么，我哪里错了？ 我只是想让 requestRoster() 返回 Array(64)

谢谢，

Answer 1

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

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

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

$roster = await requestRoster();

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

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

Answer 2

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

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

$roster = await requestRoster();

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

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

Answer 3

只需从此行中删除await ：

const json = await response.json()