How do I make a JavaScript promise return something other than a promise?

Question

I have a spec from a client for an implementation of a method in a module:

 // getGenres():
 //  Returns a promise. When it resolves, it returns an array.

If given an array of genres,

['comedy', 'drama', 'action']

Here is a skeleton method with a promise:

MovieLibrary.getGenres = function() {
  var promise = new Promise(function(resolve, reject) {
    /* missing implementation */
  });

  return promise;
};

Can the promise be made to return the data found in the genres? Is there a better way to achieve the spec description?

Answer 1

It sounds like you aren't understanding how promises are used. You return a promise. Then, later when your code resolves the promise, it resolves it with a result and that result is passed to the .then() handler attached to the promise:

MovieLibrary.getGenres = function() {
  var promise = new Promise(function(resolve, reject) {
    /* missing implementation */
    resolve(result);
  });

  return promise;
};

MovieLibrary.getGenres().then(function(result) {
    // you can access the result from the promise here
});

Answer 2

Updated answer for ES2017

The method will still return a promise, but you can use const value = await (the promise) to assign a value to a variable

await stops executing until the Promise has resolved (ie, has a value). Unlike using .then() you can just keep awaiting values as you run various functions that return promises, and execution continues onto the next line (this is called 'direct style). It's also much nicer to look at than .then() everywhere, since it's consistent with the rest of JavaScript.

// Example function that returns a Promise that will resolve after 2 seconds
var getGenres = function() {
  return new Promise(function(resolve) {
    setTimeout(function(){
      resolve(['comedy', 'drama', 'action'])
    }, 2000);
  });
}

// We start an 'async' function to use the 'await' keyword
(async function(){
  var result = await getGenres()
  console.log('Woo done!', result)

  // But the best part is, we can just keep awaiting different stuff, without ugly .then()s
  var somethingElse = await getSomethingElse()
  var moreThings = await getMoreThings()
})()

Await is supported in all current browsers and node

Answer 3

The way I like to do it is to create a let variable and assign the 'then' result to that variable. Const won't work because it will give you an error. It will be like let value_result = function_that_returns_promise.then(result => value_result = result)

For your example, I made the method into a function for simplicity:

const genres = ['comedy', 'drama', 'action'];

function getGenres() {
  var promise = new Promise( (resolve, reject) => {
     let result = genres[0]  //just picking out the first one as example
     resolve(result)
  })
  return promise
}

const result_as_promise = getGenres()
console.log(result_as_promise);

//output:
//Promise { 'comedy' }

let result_as_value = getGenres().then(result => result_as_value = result)

setTimeout(function () {
  console.log(result_as_value);
}, 0);

//output:
//comedy

You have to use setTimeout if you are running through node (otherwise you'll get undefined error due to racing condition); if running it in browser console, then you prob don't need the setTimeout.