在Singleton模式中使用Axios.js一次提供對象

Question

我正在使用axios返回模塊所必需的JSON對象。 這是一個很大的對象，因此我想使用單例模式來顯着減少每次需要此對象時的請求。

例如：

// This variable holds the JSON object once it is retrieved by axios
var myJsonObject = null;

function fetchMyJsonObject() {
    if (!myJsonObject) {
        // use axios here to fetch
        axios.get('/objects/my-json-object')
             .then(response => {
                 myJsonObject = response.data;
             });
    }
    return myJsonObject;
}

這里的問題很明顯：axios的請求是異步的，因此return myJsonObject; 該行將在axios請求完成之前運行，並且在為myJsonObject變量分配獲取的數據response.data; 。 因此， myJsonObject將始終為null 。

我希望只獲取一次 myJsonObject並將其存儲到一個變量中，該變量可以提供給其他客戶端模塊（如果已存在）。 如果它不存在，那么我希望獲取並存儲它。

如何重組此功能以實現此目的？

Answer 1

只需返回promise對象。 在客戶端代碼中，您只需要調用promise對象。

var getJsonPromise = null;

    function fetchMyJsonObject() {
        if (!getJsonPromise ) {
            // use axios here to fetch
             getJsonPromise  = axios.get('/objects/my-json-object');
        }
        return getJsonPromise;
    }

客戶代碼

fetchMyJsonObject();

getJsonPromise.then(response => // do whatever you want with json data);

Answer 2

如何使用新的ES語法

// This variable holds the JSON object once it is retrieved by axios
var myJsonObject = null;

async function fetchMyJsonObject() {
    try {
        if (!myJsonObject) {
            myJsonObject = await axios.get('/objects/my-json-object');
        }

        return myJsonObject;
    }
    catch(error) {
        console.log(error)
    }
}