使用 JavaScript 異步加載腳本

在現代網絡中，通常使用 Google Analytics、Facebook Login 等第三方庫來與這些服務集成。

在本文中，您將學習如何使用 JavaScript 在瀏覽器中異步加載外部腳本文件。

這個想法是創建一個以腳本 URL 作為參數並使用 Promise 異步加載它的函數。

當腳本加載完成時，promise 會被解析成功，否則會被拒絕。

const loadScript = (src, async = true, type = "text/javascript") => {
    return new Promise((resolve, reject) => {
        try {
            const el = document.createElement("script");
            const container = document.head || document.body;

            el.type = type;
            el.async = async;
            el.src = src;

            el.addEventListener("load", () => {
                resolve({ status: true });
            });

            el.addEventListener("error", () => {
                reject({
                    status: false,
                    message: `Failed to load the script ${src}`
                });
            });

            container.appendChild(el);
        } catch (err) {
            reject(err);
        }
    });
};

讓我們嘗試加載 Facebook JavaScript SDK：

loadScript("https://connect.facebook.net/en_US/sdk.js")
    .then((data) => {
        console.log("Facebook script loaded successfully", data);
    })
    .catch((err) => {
        console.error(err);
    });

而已！一旦成功解決，您還可以在 Promise 中執行操作。這個技巧也可以用於有條件地為不同環境加載腳本。