Promise returns the promise object in Runkit for some reason

JavaScript Discussion
1

Perhaps I’m not understanding correctly, but I’ve gone ahead and ran the following on other editors (jsFiddle, codepen) and I get the desired result, however when I run this code in RunKit- I get a Promise object- not a console log like I want.

var terms = ['Brainf**k', 'Velato', 'Ook!'];

  function get(url, callback) {
      var xhr = new XMLHttpRequest();
      xhr.open('get', url);
      xhr.addEventListener('readystatechange', function () {
          if (xhr.readyState === 4) {
              if (xhr.status === 200) {
                  console.log('successful ... should call callback ... ');
                  callback(null, JSON.parse(xhr.responseText));
              } else {
                  console.log('error ... callback with error data ... ');
                  callback(xhr, null);
              }
          }
      });
      xhr.send();
  }

  function getPromise(url) {
      return new Promise(function (resolve, reject) {
          get(url, function (err, result) {
              if (err) reject(err);
              else resolve(result);
          });
      });
  }

  var promises = terms.map(function (term) {
       return getPromise('https://api.github.com/search/repositories?q=' + term);
  });

  Promise.all(promises).then(function (data) {
      console.log(data);
  });
2

A couple things to make these easier in the future to understand:

Your final line is a Promise, which is why we show a Promise. In theory, had it succeeded, it would have also logged the result. However, in this case, it actually error-ed. The reason you don’t see the error is because the error is locked in the promise. To see it, simply attach a catch:

Promise.all(promises).then(function (data) {
    console.log(data);
}).catch(function(e) { console.log(e) })

Now you’ll see it says:

ReferenceError: XMLHttpRequest is not defined

That’s because RunKit is a node environment, not browser. So you have to use a library for requests. You can for example use “got”:

var got = require(“got”);

The nice thing about got is that its already a promise. So you can just do got(“URL”):

var promises = terms.map(term => got(‘https://api.github.com/search/repositories?q=’ + term));

We’ve made an even easier to use one called async-get-json.

Finally, RunKit allows “top-level await”, so you can await promises instead of .thening them (That way you don’t need to log):

await Promise.all(promises);

The final result is viewable here: https://runkit.com/tolmasky/getting-example-json

3

Thanks Francisco, that’s crystal clear to me now. :grin:

David