Mapping a promise which returns foo, to another promise which returns bar?

Question

I have a function which makes an XMLHttpRequest and returns a promise with the response from the request.

However I'd like to instead return a promise which contains just one string from the response.

E.g instead of the promise resolving to response = {status, data} etc, I'd like to return just response.data.some_field

How can I do this?

score 2 · Accepted Answer · answered Apr 28 '19 at 14:53

If you call .then on a promise, you'll produce another promise which will resolve to whatever you return in the callback function. So take the current promise that you're creating, and then add on the following:

.then((response) => {
  return response.data.some_field;
});

So maybe the full function will look like this:

function getStuff() {
   return new Promise((resolve, reject) => {
     //somethingWithXMLHttpRequest      
   }).then((response) => {
      return response.data.some_field;
   });
}

Lee Brindley · Answer 2 · 2019-04-28T15:19:53.267

What you're looking for is promise chaining. Link goes to mozilla's doc page on promise chaining.

function httpRequestAsync () {
    // Return a promise... This is where your XMLHttpRequest takes place
}

function getStuffAsync() {

   // Make your http request, chain the return promise, 
   // and return a promise, which resolves to the chosen field.
   return httpRequestAsync() //Calling .then() on this promise is promise chaining.
       .then((response) => { 
          return response.data.some_field;
       });
}

function someBusinessLogicFunction () {

     let yourString = "";

     getStuffAsync()
         .then((response) => {
              yourString = response; // yourString does in fact equal the response param... :).catch(() => {
               console.log("Something went wrong, or this answer sucks ha ha!");
          }); 
     }) 
}


// Or using async/await, for fun

async someBusinessLogicFunction2 () {

     let yourString = "";

     try {
         yourString = await getStuffAsync();
     } catch (e) {
         console.log("Something went wrong, or this answer sucks ha ha!");
     }
}

My example splits out your HTTP request into one function, with another function declared, which calls that function, and performs the promise chaining. You could omit the second function, and return the chained promise from the function that performs the HTTP request.

score 0 · Answer 3 · answered Apr 28 '19 at 14:54

You have something like this (got it from your code block before you edited the question)

 const promise = axios
    .post(url("fistbump"), data)
    .then(result => {
      window.console.log("Got fistbump response: ", result.data);
      localStorage.setItem(ACCOUNT_TOKEN_FIELD, result.data.key);
    });

  return promise;

If the Axios promise respects the ES6 promise spec, you can simply return what you want from the .then clause to get the value wrapped in a promise, which gives you

 const promise = axios
    .post(url("fistbump"), data)
    .then(result => {
      window.console.log("Got fistbump response: ", result.data);
      localStorage.setItem(ACCOUNT_TOKEN_FIELD, result.data.key);
      return result.data;
    });

  return promise;

Mapping a promise which returns foo, to another promise which returns bar?

3 Answers3