CODEWITHSUNDEEP
javascriptreactjs
user11232976
user11232976

Reputation:

How to use promises instead of callback in reactjs?

i want to execute a function once the other function is completed. I have used callbacks but would like to use promises. But i am not sure how to go about it.

Below is the code,

this.set_function(this.save); //save is the callback method 

set_function = (callback) => {
    const some_var = {};
    this.props.get_method.then(response => {
        some_var.data = response;
        this.setState({selected: some_var});
        if(callback) {
            callback(this.props.id, some_var_data);
        }
    });
};

save = (id, some_var) => {
    const payload = {};
    payload.some_var = [some_var];

    client.update(id, payload)
        .then((request) => {
            this.save_data(id);
        });
};

Here in the above code, once set_function is completed save function should be executed. As shown above it works with callback. How can i do the same with promises. Could someone help me with this?

Upvotes: 1

Views: 1134

Answers (4)

T.J. Crowder
T.J. Crowder

Reputation: 1074138

The only trick there is that your callback expects two separate things (this.props.id and some_var_data). A promise can have only one fulfillment value — so you wrap those up as an object:

set_function = () => this.props.get_method.then(response => {
    this.setState({selected: some_var});
    return {id: this.props.id, data: response};
});

Notice that since you get a promise from this.props.get_method, we just chain off it.

(Your some_var_data was already an object, but it only had the data property, so I just included data in the result object directly.)

You'd use it like this:

set_function()
.then(({id, data}) => {
    // use `id` and `data` here
})
.catch(error => {
    // Handle error here
});

(Or don't include .catch and return the promise chain to something else that will handle errors.)

Or of course, if you used it in an async function:

const {id, data} = await set_function();

Upvotes: 1

Vgoose
Vgoose

Reputation: 249

In this case, you would have to have set_function return a Promise.

set_function = () => {
    const some_var = {};
    this.props.get_method.then(response => {
        some_var.data = response;
        this.setState({selected: some_var});
        return Promise.resolve({id: this.props.id, some_var: some_var_data})
    });
};

Now you can use it like this: 

set_function().then(data => save(data)

Here's a jsfiddle you can play with.

https://jsfiddle.net/ctwLb3zf/

Upvotes: 0

Andria
Andria

Reputation: 5075

Await your promises

Using async ... await your function will return a promise that will resolve once your function is finished.

set_function = async () => {
    const some_var = {};
    const response = await this.props.get_method;

    some_var.data = response;
    this.setState({selected: some_var});
    return [this.props.id, some_var_data];
};

When you call set_function it will return a promise so you can await or .then it. Like so:

this.set_function().then(this.save);
// where
save = ([ id, some_var ]) => {
    ...
}

Upvotes: 0

Jonas Wilms
Jonas Wilms

Reputation: 138257

Make it promising, by returning the chained promise:

set_function = (callback) => {
 return this.props.get_method.then(response => {      
    this.setState({selected: some_var});
    return {id: this.props.id, some_var };
  });
};

Then chain the other function:

this.set_function.then(this.save)

and finally desteucture the passed object:

save = ({ id, some_var }) => {

Upvotes: 1

Related Questions