Both .then and .catch are being executed in the same block of code

Question

so I try to prevent from item to get into an array if it's already there once. Basically, the function is doing its job and not allowing to insert an item that already exists. But, all the error messages that I put using .catch and else are being shown on the screen, meaning that both .then and .catch are being executed and I don't understand why... This is my code:

 function onBuy() {
        const email = firebase.auth().currentUser.email;
        const ref = firebase.firestore().collection('parties').doc(String(name)).collection('users').doc(String(email));
        const ref2 = firebase.firestore().collection('users').doc(String(email));
        ref.get()
        .then((doc) => {
            if (!doc.exists) {
                ref2.get()
                .then((doc2) => {
                    if (doc2.exists) {
                        ref.set({
                            firstname: doc2.data().firstname,
                            lastname: doc2.data().lastname,
                            phone: doc2.data().phone
                        }).then(
                            ref2.update({ parties: firebase.firestore.FieldValue.arrayUnion(name) }).then(
                                Actions.pop()))
                        .catch(Alert.alert('fail'));
                    }
                }).catch(Alert.alert('fail'));                   
            }
            else {
                Alert.alert('this user already bought a ticket');
            }
        })
        .catch(Alert.alert('this user already bought a ticket'));
    }

I tried to search for solutions but didn't found an answer. Thanks in advance :)

Only use the Stack Snippet to show a working example. Otherwise just use code block with \`code here\` or \`\`\` for multiline code \`\`\` — kemicofa ghost, Feb 18 '19 at 15:09
If something in the .then block throws it'll go into the catch. Whatever catch returns is how the promise resolves (alert returns undefined). None of your .then functions seem to return anything as well. — HMR, Feb 18 '19 at 15:09
You must pass a callback to `catch`. You are calling `Alert.alert()` immediately — Bergi, Feb 18 '19 at 15:09
I would also change the message depending on the `catch` that is being called so I know which one is being called. You have multiple similar alerts which will make tracking down a bug an issue. — Andrew, Feb 18 '19 at 15:15
Kind of related: [Calling functions with setTimeout()](https://stackoverflow.com/q/3800512/691711) in that you are calling a function where you should be passing a function reference. In this instance, `catch()` is `setTimeout()`. You're doing it correctly with the `then()` so follow the same pattern. — zero298, Feb 18 '19 at 15:34
@HMR thanks! I added the alert as a returned object and it worked — Adar Wallerstein, Feb 18 '19 at 15:35

score 1 · Answer 1 · answered Feb 18 '19 at 15:35

1

You have to realize that .then passes results/errors to the next .then/catch. You did not specify a callback to .catch; all you are doing is calling the Alert.alert() immediately after .then.

So you should have

someAsyncOperation(params)
 .then(function(result){
  // Do something with the result
 })
 .catch(function(error){
 // Handle error
});

Also note that all your .then seems not to be returning anything.

answered Feb 18 '19 at 15:35

Debaryoh

73
7

Thanks, I'm pretty new to this, so it is very helpful for me :) @Debaryoh – Adar Wallerstein Feb 18 '19 at 15:41

score 0 · Accepted Answer · answered Feb 18 '19 at 15:40

Found the Solution. Just passed the Alert.alert() in an arrow function in the .catch. Like so:

    function onBuy() {
    const email = firebase.auth().currentUser.email;
    const ref = firebase.firestore().collection('parties').doc(String(name)).collection('users').doc(String(email));
    const ref2 = firebase.firestore().collection('users').doc(String(email));
    ref.get()
    .then((doc) => {
        if (!doc.exists) {
            ref2.get()
            .then((doc2) => {
                if (doc2.exists) {
                    ref.set({
                        firstname: doc2.data().firstname,
                        lastname: doc2.data().lastname,
                        phone: doc2.data().phone
                    }).then(
                        ref2.update({ parties: firebase.firestore.FieldValue.arrayUnion(name) }).then(
                            Actions.pop()))
                    .catch(() => Alert.alert('error', 'oops, something went wrong'));
                }
            }).catch(() => Alert.alert('error', 'Sorry, something went wrong'));                   
        }
        else {
            Alert.alert('Purches fails', 'You have already bought a ticket to this party!');
        }
    })
    .catch(() => Alert.alert('fails', 'user problem'));
}

Both .then and .catch are being executed in the same block of code

2 Answers2