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

Question

所以我之前询问过并将其用于一些额外的处理。

例如：我需要抓取一份预报，并从这里分解详细信息： 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();

}

我可以访问数据集并使用我的获取调用中返回的对象，但是，我不确定我是否应该设置它比试图找到一种方法来阻止它更好其他一切。到目前为止，每个消息来源都说，“只是做出承诺”。

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

上一个搜索

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

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

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

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

Answer 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>)

Answer 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)

Answer 3

谢谢大家的帮助！

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

异步 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

javascript

asynchronous

fetch

promise

目标：

我目前所在的位置：

上一个搜索

问题