How can we map a promise that resolves to foo to a new promise that resolves to bar?

Question

How can we map a promise that resolves to foo to a new promise that resolves to bar?

I am working on a function that uses an XMLHttpRequest to retrieve data and returns a promise with the response.

But now I want to modify it so that the promise only contains a specific string from the response.

Instead of resolving to response = {status, data}, I want the promise to return just response.data.some_field

Is there a way to achieve this?

javascript vue.js axios es6-promise

Answer 1

Answer №1

When you chain the .then method to a promise, you are essentially creating a new promise that will resolve to the value returned in the callback function. To implement this, simply add the following code snippet to your current promise:

.then((res) => {
  return res.data.some_value;
});

Your final function may look like this:

function fetchData() {
   return new Promise((resolve, reject) => {
     //performing some action
   }).then((res) => {
      return res.data.some_value;
   });
}

Answer 2

When you chain the .then method to a promise, you are essentially creating a new promise that will resolve to the value returned in the callback function. To implement this, simply add the following code snippet to your current promise:

.then((res) => {
  return res.data.some_value;
});

Your final function may look like this:

function fetchData() {
   return new Promise((resolve, reject) => {
     //performing some action
   }).then((res) => {
      return res.data.some_value;
   });
}

Answer 3

Answer №2

If you're searching for a way to efficiently handle asynchronous operations in JavaScript, then what you need is promise chaining. Check out Mozilla's documentation on promise chaining for more details.

function sendHttpRequestAsync () {
    // This function returns a promise that handles the XMLHttpRequest
}

function fetchDataAsync() {

   // Make an HTTP request, chain the return promise, 
   // and resolve it to retrieve the desired data field.
   return sendHttpRequestAsync() //Utilizing .then() method for promise chaining
       .then((response) => { 
          return response.data.some_field;
       });
}

function executeBusinessLogicFunction () {

     let result = "";

     fetchDataAsync()
         .then((response) => {
              result = response; // Assigning the response to the 'result' variable
          }) 
          .catch(() => {
               console.log("An error occurred or this explanation might not be helpful at all!");
          }); 
     }) 
}


// Alternatively, using async/await for experimentation

async function executeBusinessLogicFunction2 () {

     let result = "";

     try {
         result = await fetchDataAsync();
     } catch (e) {
         console.log("An error occurred or this explanation might not be helpful at all!");
     }
}

In my illustration, I separated the HTTP request into one function and introduced another function that calls the former and executes the promise chaining process. You could simplify the code by excluding the second function and directly returning the chained promise from the initial function handling the HTTP request.

Answer 4

If you're searching for a way to efficiently handle asynchronous operations in JavaScript, then what you need is promise chaining. Check out Mozilla's documentation on promise chaining for more details.

function sendHttpRequestAsync () {
    // This function returns a promise that handles the XMLHttpRequest
}

function fetchDataAsync() {

   // Make an HTTP request, chain the return promise, 
   // and resolve it to retrieve the desired data field.
   return sendHttpRequestAsync() //Utilizing .then() method for promise chaining
       .then((response) => { 
          return response.data.some_field;
       });
}

function executeBusinessLogicFunction () {

     let result = "";

     fetchDataAsync()
         .then((response) => {
              result = response; // Assigning the response to the 'result' variable
          }) 
          .catch(() => {
               console.log("An error occurred or this explanation might not be helpful at all!");
          }); 
     }) 
}


// Alternatively, using async/await for experimentation

async function executeBusinessLogicFunction2 () {

     let result = "";

     try {
         result = await fetchDataAsync();
     } catch (e) {
         console.log("An error occurred or this explanation might not be helpful at all!");
     }
}

In my illustration, I separated the HTTP request into one function and introduced another function that calls the former and executes the promise chaining process. You could simplify the code by excluding the second function and directly returning the chained promise from the initial function handling the HTTP request.

Answer 5

Answer №3

Upon reviewing the code block before you made edits to the question, it appears that you have something like this:

 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 follows the ES6 promise spec, you can simply modify the .then clause to return the desired value wrapped in a promise, resulting in:

 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;

Answer 6

Upon reviewing the code block before you made edits to the question, it appears that you have something like this:

 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 follows the ES6 promise spec, you can simply modify the .then clause to return the desired value wrapped in a promise, resulting in:

 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;

How can we map a promise that resolves to foo to a new promise that resolves to bar?

Answer №1

Answer №2

Answer №3

Similar questions

Determining when a message has been ignored using php

Struggling with your Dropdown Menu onclick functionality in Javascript? Let me lend

The Next.js application is functioning smoothly in development, but encounters errors during the building and deployment processes

What is the process for calling an API once and retrieving various content from the same API when using Vuejs?

The task "grunt-karma.js" is currently being loaded, but unfortunately an error has occurred: SyntaxError - An unexpected identifier was found

What is the optimal strategy for managing multilingual text in a React website?

What is preventing my video from filling the entire screen?

Eliminate all the zeros from the date string

Ensuring that the desired DOM elements have loaded before attempting to manipulate them in Vue.js

Interactive Div that Adapts

Radio button triggers an ajax call once, but then fails to function

Using Javascript to perform redirects within a Rails application

Fill up mongoose with data on 3 schemas

Discover the steps to linking a dropdown menu to a text input using HTML and JavaScript

Error: No route found at this location

Modify the tooltip of the selected item in an ng-repeat loop in AngularJS

Is there a way to stream audio directly from a URL on the client-side using ASP.NET?

Confirm before closing the window

Infinite scrolling with a dynamic background

The nth-child selector fails to function properly with a customized MUI component in CSS