异步 Javascript - 使用 Fetch 从 Weather.gov 获取数据以更新页面，但返回的承诺不再可用

Posted 2023-02-19

【中文标题】异步 Javascript - 使用 Fetch 从 Weather.gov 获取数据以更新页面，但返回的承诺不再可用

【英文标题】：Async Javascript - Using Fetch to get Data from Weather.gov to update a page, but returned promise is no longer thenable

【发布时间】：2022-01-14 17:00:38

【问题描述】：

所以我之前询问过how I should be going about pulling data from weather.gov 并将其用于一些额外的处理。

例如：我需要获取一个预测，并从这里分解详细信息： https://api.weather.gov/zones/forecast/CTZ002/forecast

---

目标：

我有一个网页需要根据从 weather.gov API 中提取的数据更改一些值。 我们向weather.gov 询问本周的预报。然后信息被分解，我们分解预测字符串，查找特定值并从中获取一些其他值。

---

我目前在哪里：

以前，我已经设法将我的数据输入到一个可以满足我需求的系统中。 我被告知不要将收到的对象分配给异步函数之外的变量。示例：

// Example of what I was told not to do
let dataSet;
async function getData(url)

    let response = await fetch(url);

    if(!response.ok) throw new Error('Error: $response.status')

    dataSet = await response.json();

我可以访问 dataSet 并使用在我的 fetch 调用中返回的对象，但是，我不确定是否有一种方法可以设置它，这比试图找到一种阻止其他所有东西的方法更好.到目前为止，每个消息来源都说，“只要做出承诺”。

所以现在我有了我的承诺，我需要解决它并返回值或错误。但是，这就是我试图通过将 dataSet 分配给数据来访问的内容。

---

以前的搜索

有人告诉我，我应该尝试将返回的对象分配给 dataSet，因为它可能会导致问题。我遇到了一些基本情况，我尝试在变量准备好之前访问它并接收未定义的变量。

以下是我浏览过的一些来源：

How to return the response from an asynchronous call Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference How to make a function that contains a promise return a value instead of a promise? MDN - Fetch API MDN - Async Functions MDN - Promise

这些对我正在寻找的东西没有帮助。他们解释了如何到达我现在的位置。现在显然需要付出一些东西。

---

问题

我是否应该将我的整个函数集异步包装以执行此操作，而所有其他函数都只是箭头函数？

async function main()

   //Do the things
   let dataSet = fetch(url).then((res)=>res.json);

   let out = await dataSet.objects; // Or do something with strings, or what not? Can I do this?
   

我已经读到我应该将我的 promise 对象与 .then(/*do stuff*/) 一起使用以便正确访问信息，但是一旦它被分配了一个超出异步函数范围的变量，它就不再起作用（？）

let promiseObj = new Promise();
async function getData(url)
return fetch(url).then((res)=>res.json);


promiseObj.then((value)=>console.log(value)).catch(console.error); // Always throws an error saying promiseObj doesn't have a .then function

我显然遗漏了哪一小块非常重要的拼图？ 哪个特定部分没有留在我的脑海中？ 我只是不明白

【问题讨论】：

let promiseObj = new Promise(); 在 Chrome 控制台中引发错误。

不要混用。如果您使用异步等待，则不需要。如果你想要 thenable 的东西，你不必使用 async

您的 sn-p 显示 let promiseObj = new Promise(); 让我认为您仍然无法传达您的意思，因为这没有意义。如您所知，每个人的回答都与上一个问题相同。你是说要将fetch返回的promise赋值给promiseObj，在其他地方访问？我希望不是因为这是我们一直试图告诉你避免的...????

回答其中一个问题：将其包装在一个函数中并始终使用await 访问承诺的值将缓解所有这些问题。

我尽量不混合它们。另外@JuanMendes 再次感谢您在上一个问题中的解释。所以我真的应该在异步包装器中运行我的进程。我应该有几行来抛出一个加载器等待这个函数完成吗？

【参考方案1】：

也许你看起来像这样？

async function getData(url) 
try 
    const res = await fetch(url,  method: "GET" );
    const data = await res.json();
    console.log(data);

catch 
    console.error("error");

使用

await getData(<URL>)

【参考方案2】：

像这样使用它：

let promiseObj = new Promise((resolve,reject)=>
    // resolve whatever
  );

然后打电话给你的

promiseObj.then((value)=>console.log(value)).catch(console.error);

对于您的异步块，您实际上可以通过then 或等待它来执行进一步的操作，即

async function getData(url)
return fetch(url).then((res)=>res.json);


getData(url).then(x=>)

或

await getData(url)

【参考方案3】：

感谢大家的帮助！

@JuanMendes 给了我一个答案，将我需要在异步函数中执行的流程包装起来，以便在不引起问题的情况下处理我的数据。