1

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

Ruan Mendes
  • 90,375
  • 31
  • 153
  • 217
Chris Gergler
  • 168
  • 11
  • `let promiseObj = new Promise();` throws an error in Chrome console. – Ryan Wilson Dec 09 '21 at 21:52
  • Don't mix it. You don't need then if you're using async await. And if you want thenable things you don't have to use async – kevinSpaceyIsKeyserSöze Dec 09 '21 at 21:58
  • Your snippet showing `let promiseObj = new Promise();` makes me think you still are not able to communicate what you mean since that doesn't make sense. As you can tell, everyone is replying with the same responses as the previous question. Are you saying you want to assign the promise returned by `fetch` to `promiseObj` and access it in other places? I hope not because it's what we've been trying to tell you to avoid... – Ruan Mendes Dec 09 '21 at 22:08
  • Answer to one of the questions: wrapping it in a function and always using `await` to access the values of promises would alleviate all these problems. – Ruan Mendes Dec 09 '21 at 22:12
  • I'm trying not to mix them. Also @JuanMendes Thanks again for your explanations in the previous question. So I really should be running my processes in an async wrapper. Should I have a few lines to throw a loader up to wait until this function is finished? – Chris Gergler Dec 10 '21 at 13:07
  • @JuanMendes Hey, would it be okay if you post wrapping the whole process in an async function as an answer? I'd like to give you the credit :) – Chris Gergler Dec 21 '21 at 18:44

3 Answers3

1

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>)
Oleg
  • 1,467
  • 4
  • 26
  • 39
1

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 perform 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=>{})

or

await getData(url)
kplus
  • 694
  • 8
  • 31
0

Thank you everyone for all of the assistance!

@JuanMendes gave me an answer of wrap the processes I need to perform in an async function in order to process my data without causing issues.

Chris Gergler
  • 168
  • 11