Simple Javascript question of handling responses

1

Hi there,

Currently I am working on a project, and got a bit stuck as my Javascript skills are not the best :frowning:

I used Fetch to get a response from the an API. And after I do get a response which I can deal with within the .then() See code and question below:

function getResponse(){

fetch(URL, requestOptions)
.then(function (response) {
    return response.json();
})
.then(data => valid = data)
.then(function (valid){
    console.log(valid)
})

}

Function handleResponse(){
console.log(valid)
}

Now it try to get the valid variable from that .then to the “handleResponse” function. However I get in my console “Undefined”. All variables are defined at the top so that is not the problem. However i am not sure how to do it and why it shows me “Undefined”. Maybe someone can help? It would be much appreciated

2 
fetch(URL, requestOptions)
.then(function (response) {
    return response.json();
})
 // this line donst return a promise. why do you need this line?
.then(data => valid = data)
.then(function (valid){
    console.log(valid)
})

if you do something async in there just return a promise

.then(data => {
  return new Promise((resolve, reject) => {
    try {
    // do something async with data and asign to valid
    resolve(valid)
    } catch (err => reject(err))
  })
})

but im trying to guess here. since the second then dosnt make sense to me.

3

Hi thanks for your reply. I think I do understand what your are however it is not really working out for me. So maybe I can try to make myself bit clearer so you can have a better understanding as it is sometimes difficult to explain on forums.

function getResponse(){

    fetch(URL, requestOptions)
    .then(function (response) {
    return response.json();
})
.then(function (valid){
    console.log(valid)
if (valid.success == 1) { 
    outcome = 1
} else {
    outcome = 0
}
})
console.log(outcome) // HERE I GET UNDEFINED IN CONSOLE
}

So i am trying to get this “outcome” var out of the .then however still did not figured it out. Maybe I gave you a better understanding in what i want to achieve? I hope so.

4

ok,


function getResponse(){
  // Will run async, this means that the browser will run fetch and then continue to the next line,
  // console.log(outcome). then after the fetch, the browser will enter the .then(response => ...)
  fetch(URL, requestOptions)
    .then(function (response) {
    return response.json();
  })
  .then(function (valid) {
    console.log(valid)
    if (valid.success == 1) { 
      outcome = 1
    } else {
      outcome = 0
    }
  })
  // this code will run after calling fetch but without waiting for it to finish, son outcome wull be undefined.
  console.log(outcome) // HERE I GET UNDEFINED IN CONSOLE
}

// so mayby a solution would be use async/await
async function getResponse () {
  // notice the await, this will run the fetch function and await for it to return
  const response = await fetch(URL, requestOptions)
  // also await here since respnse.json return a promise
  const valid = await response.json()
  // now, after fetch and .json() the code continues here,
  if (valid.success == 1) { 
    outcome = 1
  } else {
    outcome = 0
  }
  // now this will work
  console.log(outcome)
}
1 Like
5

Amazing now I understand why it was undefined all the time. Thankyou really appreciate the lesson!

Respect.

1 Like