JavaScript Fetch API - 将输出保存为对象[重复]答案

【问题标题】：JavaScript Fetch API - Saving output as an object [duplicate]JavaScript Fetch API - 将输出保存为对象[重复]
【发布时间】：2020-08-15 13:36:09
【问题描述】：

我试图弄清楚如何将 fetch 的输出保存到变量中。我的目标是将它用作一个对象。

这是我的代码：

async function getWeather() {
    let response = await fetch('url');
    let result = await response.json();
    return console.log(result);
}
getWeather();

该代码给了我预期的响应

我尝试返回结果而不是控制台日志并将其存储在一个变量 (let weather=getWeather();) 中，该变量为我提供了 promise 对象

当我在控制台登录 weather.

我还为这个问题尝试了另一个解决方案，该解决方案得到了 here 的回答，但是当我尝试在 fetch 之外对对象进行控制台记录时，我会得到未定义的结果。

还有其他解决办法吗？

【问题讨论】：

你试过用axios吗？ github.com/axios/axiosIMO，比 fetch 更强大。
@DavePastor ...不为这样一个简单的解决方案添加一个额外的库对你来说似乎有点矫枉过正？
@esqew 一点也不，在现实生活中的项目中，您会使用这样的库。但是你可以试试 Promise 链
@DavePastor 我不确定您过去从事过哪些“现实生活”项目，但我发现非常很难坐在代码中当语言的内置功能可以在相同数量的代码行中提供完全相同的功能时，审查并捍卫将任何库添加到项目中。如果该库已经包含在项目中以启用更高级的功能，那将是另一回事，但在这种情况下，我会犹豫是否建议添加任何库。我很想知道你是否相信相反的事情。
axios 是我在大多数情况下使用的，但在您的情况下它可能无济于事。您将只使用 axios 而不是 fetch。你可能会遇到同样的问题。删除第二个await，而不是返回console.log，而是返回结果。让我们知道进展如何。

标签： javascript fetch-api weather-api

【解决方案1】：

您已将其定义为 async 函数，它总是会首先返回 Promise。

在您对await 的console.log() 调用中使用await 关键字作为返回值。

async function getWeather() {
    let response = await fetch('https://api.weather.gov/alerts');
    let result = await response.json();
    return result;
}

(async () => {
    document.querySelector("#output").innerText = JSON.stringify(await getWeather(), null, 2);
})();

&lt;pre id="output"&gt;&lt;/pre&gt;

【讨论】：

await 不能仅在 async 函数中工作吗？当我尝试这样做时，我得到了Uncaught SyntaxError: missing ) after argument list。我在您发送的代码 sn-p 中也遇到了该错误。
你是对的 - 感谢您指出这一点。我更新了我的 sn-p 来说明如何在这种情况下使用 await。至于语法错误，我也看到了；我相信我为这个小型 sn-p/demo 设置的用于检索的 JSON 格式不正确，但让我再看一下以确保是这种情况。
我已经更新了我的 sn-p - 我相信抛出的“语法错误”是 await 没有在 async 函数中利用的（奇怪的）副作用 - 我的再次道歉。（另外 - 我已经重新考虑将对象作为文本输出到 <div>，Snippets 控制台似乎没有按预期工作。）
@Phil - 感谢您的编辑，非常感谢。
你可以通过return response.json()来缩短这个时间。如果您立即返回结果，则无需await .json() 承诺