Async Javascript - Using Fetch to get Data from Weather.gov to update a page, but returned promise i-CodePudding

So I previously asked about how I should be going about pulling data from weather.gov and using it for some extra processing.

For example: I need to grab a forecast, and break down the detailed information from here: https://api.weather.gov/zones/forecast/CTZ002/forecast

The Goal:

I have a webpage that needs some values changed based on the data pulled from the weather.gov API. We ask weather.gov for a forecast for the week. The info then gets broken down, we break down the forecast strings, look for specific values and get some other values out of them.

Where I am Currently:

Previously, I've managed to get my data into a system that sort of worked for what I wanted. I've been told not to assign the object I receive to a variable outside of the async function. Example:

// 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();

}

I can access dataSet and work with the object returned in my fetch calls, however, I'm not sure if there is a way I should be setting this up that would be better than trying to find a way to block everything else. So far every source has said, "Just make it a promise".

So now that I have my promise, I need it to be settled and to pass back either the value or an error. But, that's what I'm trying to access by assigning dataSet to data.

Previous Search

I've been told that I should be trying to assign the returned object to dataSet because it can cause issues. I've encountered some basic cases of this where I try to access the variable before its ready and receive an undefined.

Below are some of the sources I've gone through:

These didn't help me with what I'm looking for. They explained how to get to where I am now. Now obviously something needs to give.

Questions

Should I be just wrapping my whole function set in async to do this, and all other functions are just arrow functions?

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?
   
}

I've read that I should be using my promise object with a .then(/*do stuff*/) in order to properly access info, but once it's been assigned a variable outside of the async function's scope it no longer functions thenably(?)

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

What tiny piece of the puzzle is enormously important that I am clearly missing? What specific section isn't sticking in my brain? I just don't understand

CodePudding user response：

Maybe you are looking something like this?

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

}

use

await getData(<URL>)

CodePudding user response：

use it like this:

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

then call your

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

for your async block you can actually performed further action either through the then or by awaiting it i.e

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

getData(url).then(x=>{})

await getData(url)