[Javascript] Scope delle Promise

[ken_korn]

Ho la seguente funzione con la quale, tramite le web APIs di Mozilla, dovrei ottenere la favicon del sito corrente.
La mia domanda, come suggerisce il titolo, è come esportare il valore nello scope della Promise al di fuori della stessa

Anticipazione (Spoiler)

function getFavicon(){

        var faviconUrl;
      
        function onGot(tabInfo){
            faviconUrl = tabInfo[0].favIconUrl;
        };
      
        var currentTab = browser.tabs.query({active:true, currentWindow:true});
        var x = currentTab.then(onGot);
      
        return faviconUrl;  //non restituisce il valore di tabInfo[0].favIconUrl
    };

Ringrazio in anticipo per le risposte e la disponibilità

 

[f107]

Ciao,
sicuro che non riesci a gestire il tutto nella callback della promise?

 

[ken_korn]

In che senso? Come da esempio ho provato ad assegnare un nuovo valore alla variabile fuori dalla Promise ma a quanto pare per qualche motivo non lo memorizza una volta finita la callback. Ho quindi pensato che ci fosse un problema di scope o di contesto (anche se il valore di this, sia dentro che fuori la Promise rimane sempre l'oggetto Window) ma non saprei proprio né qual'è né come risolverlo

 

[f107]

Provo a spiegarmi meglio, purtroppo non ho il dono della chiarezza spesso

Tu provi ad assegnare il valore tabInfo[0].favIconUrl alla variabile faviconUrl nella callback onGot giusto?

Non ci riesci in quanto le promise sono asincrone, quindi l'assegnazione nella callback avviene dopo il return della funzione, e quindi immagino ti torni undefined.

Per cercare di spiegarmi meglio guarda qui: https://jsfiddle.net/u6w9d4gn/
Vedrai che ti darà 3 alert, nell'ordine in cui vengono eseguite le istruzioni, ho aggiunto anche un valore iniziale a faviconUrl per rendere più chiaro l'esempio.

Solitamente con le promise i dati si gestiscono nelle callback, quindi torniamo al mio primo post, non riesci a fare le tue operazioni con la faviconUrl nella callback onGot?
Una cosa simile

function getFavicon(){

        var faviconUrl;
      
        function onGot(tabInfo){
            faviconUrl = tabInfo[0].favIconUrl;
            // scrivi qui le operazioni da fare con faviconUrl
        };
      
        var currentTab = browser.tabs.query({active:true, currentWindow:true});
        currentTab.then(onGot);
 
    };

Fammi sapere se sono riuscito a spiegarmi

 

[ken_korn]

F107, ti ringrazio enormemente per l'aiuto. Grazie a te non solo ho capito e risolto il mio problema ma ho imparato pure qualcosa in più sulle Promise e sulle operazioni asincrone, grazie!

Per chi si trovasse come me in errore:
L'errore era quello segnalato da F107 ovvero tentare di ottenere in una funzione sincrona un valore generato da una asincrona. Javascript non gestisce un vero multi-threading (i web workers si avvicinano all'idea ma in realtà non lo sono) quindi può processare solo un'informazione per volta. Dettò ciò, una funzione sincrona sarà sempre eseguita e completata PRIMA di quella asincrona che invece viene messa "in coda" nell'esecuzione dello script. Quindi le variabili definite in funzioni asincrone non sono visibili in quelle sincrone. Nel caso quindi si voglia processare in funzioni sincrone i valori ottenuti da quelle asincrone, bisognerà cambiare la struttura dello script e continuarlo tramite callback all'interno di queste ultime che rimandano ad altre funzioni (asincrone ovviamente) che continueranno il flusso del codice.
Io ad esempio, dato che lo script in cui dovevo effettuare questa operazione era già bello corposetto e doveva svolgere altre operazioni (sincrone), ho preferito crearne un altro ad hoc per questa operazione.

E dopo questa lunga spiegazione in cui spero non aver fatto errori tecnici troppo vistosi da programmatore dilettante quale sono, ecco lo script aggiornato:

function getFavicon(){
    
    function getCurrentFavicon(tabInfo){
    
        favicon = tabInfo[0].favIconUrl;
        return favicon;
    
    };

    var currentTab = browser.tabs.query({active:true, currentWindow:true});
    var x = currentTab.then(getCurrentFavicon);
    x.then(afterGetFavicon);
        
    };


//In questa funzione sarà inserito il resto del codice
function afterGetFavicon(fav){
    
    alert(favicon);
    //continua qui il codice...
    
};

(anche se a mio modesto parere sembra strano che non ci siano modi più semplici per ottenere una semplice favicon dalle Web APIs)

Ringrazio nuovamente per l'aiuto