Wait for Promise to be fulfilled (Javascript)

Question

How does one pause his Javascript function until a Promise (in this case of the OAuth2) has been fullfilled, so that I can get the redirect URL that it should be returning?

Using regular JS in a Firefox Webextension, running latest Firefox Developer (54.0a2)

function fetchOAuth2()
{
    var redirectURL = browser.identity.getRedirectURL() + "page.html";
    console.log(redirectURL);
    var clientID = "CLIENT ID";  
    var authURL = "https://trakt.tv/oauth/authorize";  // API I'm using
    authURL += `?response_type=code`;
    authURL += `&client_id=${clientID}`;
    authURL += `&redirect_uri=${redirectURL}`;
    console.log(authURL);
    var authorizationCode = browser.identity.launchWebAuthFlow({
        interactive: true,
        url: authURL
    });
}

Answer 1

There are different approaches that are valid, so pick the one you prefer/fits with your code best.

Use promise.then()

function fetchOAuth2()
{
    var redirectURL = browser.identity.getRedirectURL() + "page.html";
    console.log(redirectURL);
    var clientID = "CLIENT ID";  
    var authURL = "https://trakt.tv/oauth/authorize";  // API I'm using
    authURL += `?response_type=code`;
    authURL += `&client_id=${clientID}`;
    authURL += `&redirect_uri=${redirectURL}`;
    console.log(authURL);

    browser.identity.launchWebAuthFlow({
        interactive: true,
        url: authURL
    })
    .then(function(authResult) {
        // do something with authResult
    })
}

If you want to access the authResult outside of this function then you will need to return the promise, and then it from the call site, ie

function fetchOAuth2()
{
    var redirectURL = browser.identity.getRedirectURL() + "page.html";
    console.log(redirectURL);
    var clientID = "CLIENT ID";  
    var authURL = "https://trakt.tv/oauth/authorize";  // API I'm using
    authURL += `?response_type=code`;
    authURL += `&client_id=${clientID}`;
    authURL += `&redirect_uri=${redirectURL}`;
    console.log(authURL);

    return browser.identity.launchWebAuthFlow({
        interactive: true,
        url: authURL
    })
}

fetchOAuth2().then(function(authResult) {
    // do something with auth result
});

Use ES7 async/await

This is a relatively new language feature, but it is supported in FF54. If you need to support other browsers you would have to use Babel to allow compatibility.

async function fetchOAuth2()
{
    var redirectURL = browser.identity.getRedirectURL() + "page.html";
    console.log(redirectURL);
    var clientID = "CLIENT ID";  
    var authURL = "https://trakt.tv/oauth/authorize";  // API I'm using
    authURL += `?response_type=code`;
    authURL += `&client_id=${clientID}`;
    authURL += `&redirect_uri=${redirectURL}`;
    console.log(authURL);

    var authResult = await browser.identity.launchWebAuthFlow({
        interactive: true,
        url: authURL
    });

    // do something with authResult
}