javascript promise not fulfilling

Question

Im a newbie javascript developper and this is my first time as a stackoverflow user but I have got valuable information from reading posts here.

I need to load a file but the code should wait because of the asynchronous nature of it. I thought a Promise might work and it is almost working but it's just still not waiting (synchronous) for the file to load. It does however wait at the end when there is no file. It should be the other way around it should wait until the file is loaded. then continue and run the next function which needs the data.

Can anyone tell me why my promise is not working? Should I even be using a promise for this or a callback?

Here is the code:

// ...

var p = new Promise(function (resolve, reject) {
    let x = getTheData(); // async data but program don’t wait.
    if (!x) { //if no data I want to wait?
        resolve('success');
        console.log('success');
    }else {
        reject('failure');
        console.log('failure');
    }
});

p.then(function () {
    let y = getNewFunctionThatNeedsTheAboveDataToWork();
    res.send('y is not working ' + y);
}).catch(function(){
    console.log('error');
});

return p;

I'm completely lost, any help would be graceful.

Answer 1

The problem here is that getData is asynchronous, so you need some way to know when it is done. That means that getData either needs to return a promise (the newer way), or accept a callback as an argument (the older way). Here is an example of how getData could be used with promises to fetch data via web call (this would be syntatically much simpler with jQuery.get, but let's stick to pure javascript for the moment):

var getData = function() {
  var p = new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.addEventListener("readystatechange", function () {
      if (this.readyState === 4 && this.status != 200) {
          console.log('Data request returned an error');
          reject('failure');
      } else if (this.readyState === 4 && this.status === 200) {
          resolve(this.responseText);
      }
    });
    xhr.open("GET", "https://httpbin.org/get", true); // true = async
    xhr.send();
  })
  return(p)
}

Then we can use this function like this:

getData().then(function(d) {
  console.log(d);
  // do something useful with d
})

Alternatively, you can accomplish the same thing with a callback:

var getData2 = function (cb) {
  var xhr = new XMLHttpRequest();
  xhr.addEventListener("readystatechange", function () {
    if (this.readyState === 4 && this.status != 200) {
        console.log('Data request returned an error');
        cb(null, "error");
    } else if (this.readyState === 4 && this.status === 200) {
        cb(this.responseText);
    }
  });
  xhr.open("GET", "https://httpbin.org/get", true);
  xhr.send();
}

getData2(function(d, e) {
  if(e) {
    console.log("oops.  there was an error: ", e);
  } else {
    console.log(d);
  }
})

Finally, if the getData function is coming from somewhere else and you cannot change it, you can convert it from a callback style function to a promise style function. Here is one way:

var promiseMe = new Promise(function (resolve, reject) {
  getData2(function(d, e) {
    if(e) {
      reject(e)
    } else {
      resolve(d)
    }
  })
})

promiseMe.then(function(d) {
  console.log(d)
})

EDIT

The above works in the browser. Here is one way to do it in node:

http = require('http');

var getData = function() {
  var p = new Promise(function (resolve, reject) {
    var data = '';
    http.get('http://httpbin.org/get', function(res) {
        res.on('data', (chunk) => {
            data += chunk;
        });

        res.on('end', () => {
            resolve(data);
        });
    })
  })
  return(p)
}
getData().then(function(d) {
    console.log(d)
})

I hope these examples start to clear things up.