Can't execute code within .then callback function?

Question

How do I execute code at the last comment in the code below? For some reason I'm not allowed to. Isn't my comment within the callback function?

The code is the result of several answers here at Stackoverflow and I don't quite understand what's going on.

browser.browserAction.onClicked.addListener(async tab => {

    const contentScriptReady = Promise.all([
        browser.tabs.executeScript(tab.id, {file: "axios.min.js"}),
        browser.tabs.executeScript(tab.id, {file: "content.js"}),
        browser.tabs.executeScript(tab.id, { file: "sweetalert2.all.min.js" }),
        browser.tabs.insertCSS(tab.id, { file: "styles.css" })
    ]);

    const connectionStatus = {};

    async function getConnectionStatusData(logicalAddress) {

        let cooperations = await axios.get('http://api.ntjp.se/coop/api/v1/cooperations.json', {
        params: {
          connectionPointId: connectionPointId,
          logicalAddressId: logicalAddressId,
          serviceDomainId: serviceDomainId,
          serviceConsumerId: serviceConsumerId,
          include: "serviceContract"
         }
        });

        /* some more let x = await axios.get... */

        connectionStatus.supportedServiceContracts = await Promise.all( cooperations.data.map(cooperation => axios.get('http://api.ntjp.se/coop/api/v1/serviceProducers.json', {
          params: {
            connectionPointId,
            logicalAddressId,
            serviceDomainId,
            serviceConsumerId,
            serviceContractId: cooperation.serviceContract.id,
          },
           }).then(response => ({ // I want to process the response but I can't put executable code here
            serviceContract: cooperation.serviceContract.namespace,
            serviceProducerDescription: response.data[0].description,
            serviceProducerHSAId: response.data[0].hsaId,
            }))
          )
        );

        await contentScriptReady;
        browser.tabs.sendMessage(tab.id, connectionStatus);

    }

});

My IDE starts complaining as soon as I try to put any executable code there, but If I put `console.log("test");` there anyway, I get `Uncaught SyntaxError: Unexpected token .`. It refers to the period. Please not that the problem is at the single line comment, not at the comment block in the middle. — Rawland Hustle, Feb 21 '19 at 16:00
I don't get any error as it is, but I do get an error if I try to put executable code where the single line comment is. — Rawland Hustle, Feb 21 '19 at 16:06
Where are you calling `getConnectionStatusData`? That you are awaiting the `contentScriptReady` which you created outside of the function declaration is suspicious, watch out for unhandled rejections. — Bergi, Feb 21 '19 at 17:52
@Bergi Thanks! Does that mean that I have to implement the `.catch()` method? — Rawland Hustle, Feb 21 '19 at 18:32
@RawlandHustle I'm not exactly sure what you're doing here, but if there's a chance that the `contentScriptReady` promise will get rejected before it is `await`ed then it's a good idea to put a `contentScriptReady.catch(err => { … })` directly after its creation. Then either handle the error right there or put only a comment in there stating that it's getting handled later. — Bergi, Feb 21 '19 at 18:39

score 1 · Accepted Answer · answered Feb 21 '19 at 17:55

1

This is an object literal returned from an arrow function. You cannot put a statement in there. You will want to rewrite it to

….then(response => {
    console.log("example");  // executable code here
    return {
        serviceContract: cooperation.serviceContract.namespace,
        serviceProducerDescription: response.data[0].description,
        serviceProducerHSAId: response.data[0].hsaId,
    };
})

answered Feb 21 '19 at 17:55

Bergi

630,263
148
957
1,375

Thank you very much! I read the answer to the question you linked to and I get it now. Appreciate it! – Rawland Hustle Feb 21 '19 at 18:38
BTW, is that because it would be double curly braces without it? – Rawland Hustle Feb 21 '19 at 18:43
My bad! So only when an arrow function returns an *object*, it has to be wrapped in parenthesis? If so, is that because it would be double curly braces without it? – Rawland Hustle Feb 21 '19 at 19:17
Yes, an arrow function with concise body can return any kind of expression but an object literal, which would be mistaken for a block body instead. Even with double curly braces it would not be valid - an object literal cannot be used as a statement. – Bergi Feb 21 '19 at 19:35
Thanks again for explaining! – Rawland Hustle Feb 21 '19 at 19:47

Can't execute code within .then callback function?

1 Answers1