Promise 返回不一致 React Native

Question

I am using a library that calls an API, and I am waiting for Promise return to receive an Array. However, even though I expect 2 elements in ActivityItem array, sometimes I receive only first of them (the one that appears first (Item1). From my point of view, I implemented the Promise incorrectly and there should be a mistake in the way I return them, but I miss seeing it. Here I call the function that uses that should return Promise:

 componentDidMount() {
    this.getDataFromKit(ONEDAYINTERVAL).then(result => {
    this.sendDataToServer(result); //sending to backend
    }).catch(e => console.error);
}

And here is a method itself:

getDataFromKit(dateFrom) {

    return new Promise((resolve) => {
    AppleKit.initKit(KitPermissions.uploadBasicKitData(), (err, results) => {
        if (err) {
            return;
        }

    AppleKit.getSamples(dateFrom, (err, results) => {
                if (err) {
                    return resolve([]);
                }
                const newData = results.map(item => {
                    return { ...item, name: "Item1" };
                });
                const allData = [...this.state.ActivityItem, ...newData];
                this.setState({ ActivityItem: allData });
                resolve(allData);
            });


        // if I delete the code below it will work just fine always grabbing only one item.
        new Promise((resolve) => { 
        AppleKit.getSamplesSecondMethod(dateFrom, (err, results) => {
            if (err) {
                return resolve([]);
            }
            const newData = results.map(item => {
                return { ...item, name: "Item2" };
            });
            const allData = [...this.state.ActivityItem, ...newData];
            this.setState({ ActivityItem: allData });
            resolve(allData);
             });
           });
        }); 
    })
}

The main issue here is I guess: how can I return multiple promises from this one method?

Answer 1

The problem as I see it, is your second block of code doesn't get run because you are resolving the promise in the first block. The way you have it coded, you will want to resolve that promise only once all your async operations have completed. I modified your code, but have not tested it. It may need to add the .then method to make sure the async data is returned before resolving the initial promise.

What happens if you try this?

UPDATE

It looks like the below code solved your problem as you accepted my answer. However, I did re-write it before I realized you accepted so I will add the new updated code in case that will help you or someone else.

Original Answer

getDataFromKit(dateFrom) {

    const thenable = new Promise((resolve) => {
            AppleKit.initKit(KitPermissions.uploadBasicKitData(), (err, results) => {
                if (err) {
                    return;
                }


                AppleKit.getSamples(dateFrom, (err, results) => {
                    if (err) {
                        return resolve([]);
                    }
                    const newData = results.map(item => {
                        return {
                            ...item,
                            name: "Item1"
                        };
                    });

                    resolve(newData);

                });
            });
        })
        .then((newData) => {

            AppleKit.initKit(KitPermissions.uploadBasicKitData(), (err, results) => {
                if (err) {
                    return;
                }


                AppleKit.getSamplesSecondMethod(dateFrom, (err, results) => {
                    if (err) {
                        return;
                    }

                    var stateData = this.state.ActivityItem;

                    const addData = results.map(item => {
                        return {
                            ...item,
                            name: "Item2"
                        };
                    });
                    stateData = [...stateData, ...newData];
                    stateData = [...stateData, ...addData];

                    this.setState({
                        ActivityItem: stateData
                    });

                });


            });
        });
    return thenable;
}

Updated Code using Promise.all

getDataFromKit(dateFrom) {

    return new Promise((resolve) => {

        const promise1 = new Promise((resolve) => {
            AppleKit.initKit(KitPermissions.uploadBasicKitData(), (err, results) => {
                if (err) {
                    return Promise.reject(err);
                }


                AppleKit.getSamples(dateFrom, (err, results) => {
                    if (err) {
                        return Promise.reject(err);
                    }
                    const newData = results.map(item => {
                        return {
                            ...item,
                            name: "Item1"
                        };
                    });

                    return Promise.resolve(newData);

                });
            });
        });

        const promise2 = new Promise((resolve) => {

            AppleKit.initKit(KitPermissions.uploadBasicKitData(), (err, results) => {
                if (err) {
                    return Promise.reject(err);
                }


                AppleKit.getSamplesSecondMethod(dateFrom, (err, results) => {
                    if (err) {
                        return Promise.reject(err);
                    }

                    const moreData = results.map(item => {
                        return {
                            ...item,
                            name: "Item2"
                        };
                    });

                    return Promise.resolve(moreData);
                });
            });
        });


        Promise.all([promise1, promise2])
            .then(([result1, result2]) => {

                var nArrays = [result1, result2, this.state.ActivityItem];

                const finalResult = [].concat(...nArrays);

                return Promise.resolve(finalResult);

            });    
    });
}