Illustrates loading external JS libraries via promise

library-promise.js

/**
 * Illustrates loading external JS libraries via promise 
 */

class GoogleApiService {
    static promise = null;
    baseUrl = '';

    constructor(baseUrl) {
        this.baseUrl = baseUrl;
    }

    async getCoolMapStuff() {
        const google = await this.getApi();

        return google.getCoolMapStuff();
        // Guaranteed it will always work!!!!!
    }

    async getApi() {
        if (GoogleApiService.promise == null) {
            GoogleApiService.promise = new Promise(resolve => {

                window.googleApiCallback = () => {
                    // window.google is available!!
                    resolve(window.google);
                };

                const url = this.baseUrl + '?callback=googleApiCallback';
                this.appendScript(url);
            });
        }

        return GoogleApiService.promise;
    }

    appendScript(url) {
        const script = document.createElement('script');
        script.async = true;
        script.defer = true;
        script.setAttribute('src', url);
        document.head.appendChild(script);
    }
}

export default GoogleApiService;

usage.js

const baseUrl = 'https://maps.googleapis.com/maps/api/js';
const googleApiService = new GoogleApiService(baseUrl);

const coolMapStuff = await googleApiService.getCoolMapStuff();