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变量分配获取的数据{{1}之前运行}。因此，response.data;将始终为myJsonObject。

我只希望一次获取null 并将其存储到一个变量中，该变量可以提供给其他客户端模块（如果已存在）。如果它不存在，那么我希望获取并存储它。

如何重组此功能以实现此目的？

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)
    }
}

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

2 个答案: