Array stays empty when using Array.push in promise

Question

I'm trying to collect all the documents from a specific file and transform them into a Sendgrid attachment object with a content and filename property.

Step 1 and 2 are working. After step 2 I have an array of objects with some document data like the file name, type, storage URL etc.

In step 3 I want to fetch the actual file based on the storage URL and create a Sendgrid attachment object. It requires content and filename as properties.

However, with my current code, the attachments array stays empty when I'm logging the variable.

My code:

export const onStatusChanged = functions.database.ref(`files/{fileID}/general/status`).onUpdate(async (change, context) => {
    const prevStatus = change.before.val();
    const currentStatus = change.after.val();

    if (prevStatus === currentStatus) return null;

    if (currentStatus === 'email') {
        // 1. Get file data
        const snapshot = await change.after.ref.parent.parent.once('value');
        const file = snapshot.val();

        // 2. Get documents
        const documents = getDocuments(file.documents);
        console.log(documents);

        // 3. Create attachments
        const attachments = [];

        documents.forEach(document => {
            axios.get(document.url, { responseType: 'arraybuffer' }).then(image => {
                attachments.push({ content: Buffer.from(image.data).toString('base64'), filename: document.name });
            }).catch(error => {
                console.log(error)
            })
        });

        console.log(attachments) // []

        // 4. Create email object

        // 5. Send email
    }

    return null;
})

I thought by using a promise my code is synchronous?

EDIT: first I had this code

    // 3. Create attachments
    const attachments = documents.map(document => {
        const image = await axios.get(document.url, { responseType: 'arraybuffer' });
        return attachments.push({ content: Buffer.from(image.data).toString('base64'), filename: document.name });
    })

    console.log(attachments) // [ Promise { <pending> } ]

"I thought by using a promise my code is synchronous?" -> as you discovered, that's not the case. There are different ways to sequentialize async code -- we used to do async.waterfall and maybe this is still done. You might be thinking about using await. This new keyword makes async code look synchronous, though it is still definitely async. Have you tried await in your forEach? — Ray Toal
– Ray Toal, Commented Mar 7, 2019 at 3:30
@RayToal: First I did use await with a map() function. Added this code — Thore
– Thore, Commented Mar 7, 2019 at 3:41

Doug Stevenson · Accepted Answer · 2019-03-07 03:37:26Z

1

I think you misunderstand the use of promises specifically with Cloud Functions. With Cloud Functions background triggers, you are obliged to return a promise that resolves when all the async work is fully complete, else the work will be shut down. Right now you are returning null, which isn't correct.

Also, attachements doesn't seem to be accumulating promises. It's accumulating other objects that are not useful for async programming.

Read more in the documentation: https://firebase.google.com/docs/functions/terminate-functions

answered Mar 7, 2019 at 3:37

Doug Stevenson

321k37 gold badges458 silver badges474 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Thore Over a year ago

I will check the documentation and come back afterward. Thanks for the url.

Thore Over a year ago

Changed the code to async/await and wrapped the loop in Promise.all(). At the end of the if-condition (step 5) I will return a promise when sending the actual email.

Thore · Accepted Answer · 2019-03-07 04:18:55Z

0

Changed the code back to async/await and added Promise.all(). It's working like I want now.

The code:

    const attachments = await Promise.all(documents.map(async document => {
        const image = await axios.get(document.url, { responseType: 'arraybuffer' });
        return { content: Buffer.from(image.data).toString('base64'), filename: document.name };
    }));

answered Mar 7, 2019 at 4:18

Thore

1,9282 gold badges33 silver badges66 bronze badges

Collectives™ on Stack Overflow

Array stays empty when using Array.push in promise

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related