異步 Javascript - 使用 Fetch 從 Weather.gov 獲取數據以更新頁面，但返回的 promise 不再可用

Question

所以我之前問過我應該如何從 weather.gov 中提取數據並將其用於一些額外的處理。

例如：我需要獲取一個預測，並從這里分解詳細信息： https://api.weather.gov/zones/forecast/CTZ002/forecast

---

目標：

我有一個網頁需要根據從 weather.gov API 中提取的數據更改一些值。 我們向weather.gov 詢問本周的預報。 然后信息被分解，我們分解預測字符串，查找特定值並從中獲取一些其他值。

---

我目前在哪里：

以前，我已經設法將我的數據放入一個可以滿足我想要的工作的系統中。 我被告知不要將我收到的 object 分配給異步 function 之外的變量。 例子：

// 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 調用中返回的 object ，但是，我不確定是否有一種方法可以設置它，這比試圖找到一種阻止其他一切的方法更好。 到目前為止，每個消息來源都說，“只要做出承諾”。

所以現在我有了我的 promise，我需要解決它並傳回值或錯誤。 但是，這就是我試圖通過將 dataSet 分配給數據來訪問的內容。

---

以前的搜索

有人告訴我，我應該嘗試將返回的 object 分配給 dataSet，因為它可能會導致問題。 我遇到了一些基本情況，我嘗試在變量准備好之前訪問它並接收未定義的值。

以下是我經歷過的一些來源：

• 如何從異步調用返回響應
• 為什么我的變量在 function 內部修改后沒有改變？ - 異步代碼參考
• 如何使包含 promise 的 function 返回值而不是 promise？
• MDN - 獲取 API
• MDN - 異步函數
• MDN - Promise

這些對我正在尋找的東西沒有幫助。 他們解釋了如何到達我現在的位置。 現在顯然需要給予一些東西。

---

問題

我是否應該將我的整個 function 設置為異步執行此操作，而所有其他功能都只是箭頭功能？

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 object 和 .then .then(/*do stuff*/)以便正確訪問信息，但是一旦它被分配了一個異步函數之外的變量 Z31A1FD140BE4BEF2D11E121 ?)

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 給了我一個答案，將我需要在異步 function 中執行的過程包裝起來，以便在不引起問題的情況下處理我的數據。