0

I have the following script:

async function getJobs () {
    const response = await fetch('https://redhat.jobs/jobs/feed/json');
    json = await response.json();
    console.log("inside getJobs fuction " + json);
}

jobs = getJobs();
console.log("outside getJobs function" + jobs);

The first console.log displays the json response as I would expect. However, with the 2nd log I see outside getJobs function[object Promise] in the console.

I think what is happening here is that I need to wait for getJobs to run/complete before assigning the results to the jobs variable? Or is my approach this entirely wrong to begin with.

Just to give more context, I want getJobs to once, then I want to do stuff with the jobs array in the app.

Mark Locklear
  • 5,044
  • 1
  • 51
  • 81
  • `jobs = await getJobs();` – Liam May 18 '18 at 14:26
  • Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) – Liam May 18 '18 at 14:26
  • Should you be returning a value from your function I.e. return json; ? – mshirlaw May 18 '18 at 14:33

2 Answers2

1

fetch(url) and response.json() both return a Promise. What you can do with Promises is use a .then() statement. This allows you to execute some code once the Promise has been resolved. With regards to your above code, you'll notice if you run it as is, you get:

"outside getJobs function[object Promise]"
"inside getJobs fuction [object Object], [object Object], ..."

This is because getJobs() returns a Promise. So:

jobs = getJobs();
console.log("outside getJobs function" + jobs);

Executes console.log() immediately after it recieves a Promise from getJobs(). It's only when that Promise is resolved that you'll get anything useful, so you want to make sure you're calling console.log() only once the Promise has been resolved.

You can do this by using a .then() statement. Learn more about them here. This allows you to treat this code synchronously. You don't even have to worry about making getJobs() async (this can make code slightly more confusing when Promise chaining does the job just fine in my opinion). I would implement above like this:

function getJobs() {
    var result = fetch('https://redhat.jobs/jobs/feed/json');
    console.log('result inside getJobs is a Promise')
    return(result)
}

getJobs().then(function(response){
  return response.json();
  })
  .then(function(jobs){
  console.log('result after promise chain is ' + jobs)
  }
);
jmkmay
  • 1,441
  • 11
  • 21
  • Great answer, however, this is still not really getting at my question. I want a jobs array available outside of any function. So something like: https://gist.github.com/marklocklear/bd0116ff14e266310864e456271a9921. Note I am wanting a jobs array/variable that contains the json output that is outside any other function. – Mark Locklear May 18 '18 at 15:40
  • No problem. You can actually just set jobs = getJobs().then().then(). Your jobs variable will update each time the promise is resolved. You will just have to be aware that until both Promsies are resolved, jobs will be a Promise object and may need to check it's type before actually using it. – jmkmay May 18 '18 at 15:48
0

You need to create another async function in which you call getJobs() with await. The reason you have outside getJobs function[object Promise] is because the console.log is ran before the promise being resolved.

Doing it this way will fix your issue :

async function run(){
  async function getJobs () {
      const response = await fetch('https://redhat.jobs/jobs/feed/json');
      json = await response.json();
      return(json);
  }

  jobs = await getJobs();
  console.log(jobs);
 }
 
 run();
Scott Picquerey
  • 74
  • 7