wait for promise before Promise all JavaScript

Question

I have this array of promises :

return function (dispatch, getState) {

    Promise.all([
        dispatch(getThis()),
        dispatch(getThat()),
        dispatch(getThese()),
        dispatch(getThose()))]
    ).then(() => {
        let state = getState();
        dispatch({
           //dispatch
        });
    }).catch(function (err) {
        console.log(err);
    });
}

But in fact I want getThis() to be finished before calling any other dispatch because they are all dependant on the return of getThis(). How to handle this?

Thanks a lot!

EDIT my function looks like this:

export function getThis() {
    return function (dispatch, getState) {
            return new Promise((resolve, reject) => {
                axios.get('api/this/' + lienBuild).then((response) => {
                    resolve(dispatch({type: "FETCH_THIS", data: response.data}));
            });
        })
    };
}

`dispatch` isn't a promise. You need to await `getThis/getThat` etc...and dispatch afterwards — Blue, Mar 09 '19 at 13:08
Re the code in `getThis`, [see here](https://stackoverflow.com/questions/23803743/). No need for `new Promise` when you already have a promise. I don't know whether that code is right, but here's the same code not using the antipattern: `return function(dispatch, getState) { return axios.get('api/this/' + lienBuild).then(response => dispatch({type: "FETCH_THIS", data: response.data})); };` or with destructuring and shorthand properties: `return function(dispatch, getState) { return axios.get('api/this/' + lienBuild).then(({data}) => dispatch({type: "FETCH_THIS", data})); };` — T.J. Crowder, Mar 09 '19 at 13:22
@T.J.Crowder Thanks for your answer! I modified all of my action based on what you showed and this is working well, you should edit your response to add the example you just gave me this was very helpful! — Zeyukan Ich', Mar 09 '19 at 13:51

T.J. Crowder · Answer 1 · 2019-03-09T14:02:14.917

See FrankerZ's comment, apparently this dispatch function is a standard Redux thing (I don't use Redux) and it doesn't return a promise, so it doesn't make sense to use Promise.all on it.

But answering the promises aspect of "how would I wait for getThis first": Just move it to the beginning of the chain:

return function (dispatch, getState) {
    dispatch(getThis())             // First this, then...
    .then(result => Promise.all([   // ...these
        dispatch(getThat(result)),  // (I've passed the result to all three, but...)
        dispatch(getThese(result)),
        dispatch(getThose(result))
    ]))
    .then(() => {
        let state = getState();
        dispatch({
           //dispatch
        });
    }).catch(function (err) {
        console.log(err);
    });
}

or without the dispatch, since apparently that's wrong:

return function (dispatch, getState) {
    getThis()               // First this, then...
    .then(result => Promise.all([   // ...these
        getThat(result),    // (I've passed the result to all three, but...)
        getThese(result),
        getThose(result)
    ]))
    .then(() => {
        let state = getState();
        dispatch({
           //dispatch
        });
    }).catch(function (err) {
        console.log(err);
    });
}

Side note about getThis: See this question and its answers. No need for new Promise when you already have a promise. I don't know whether that getThis code is correct in terms of Redux, but here's the same code not using new Promise unnecessarily:

export function getThis() {
    return function(dispatch, getState) {
        return axios.get('api/this/' + lienBuild).then(response => dispatch({type: "FETCH_THIS", data: response.data}));
    };
}

or with destructuring and shorthand properties:

export function getThis() {
    return function(dispatch, getState) {
        return axios.get('api/this/' + lienBuild).then(({data}) => dispatch({type: "FETCH_THIS", data}));
    };
}

or if you can use async/await:

export function getThis() {
    return async function(dispatch, getState) {
        const {data} = await axios.get('api/this/' + lienBuild);
        return dispatch({type: "FETCH_THIS", data});
    };
}

Thanks for the answer this is clear on how I must do it. I'm going to look through on how I must handle promises with dispatch — Zeyukan Ich', Mar 09 '19 at 13:14

wait for promise before Promise all JavaScript

1 Answers1