javascript - 在 JavaScript 中检索传入回调的结果？

Question

我正在尝试围绕 localStorage 编写一个小型包装器，类似于 Rails 获取缓存结果的方式。在 Rails 中，模式是这样的:

# Data.find is a block which just returns the data if the cache key was not found
data = Rails.cache.fetch(key, options) { Data.find }

在 JavaScript 中，如果缓存为空，我很难获得为返回数据而执行的回调的结果。

function fetch(key, callback) {
    var result = localStorage.getItem(key);
    if (result) {
        return JSON.parse(result);
    } else {
        result = callback();
        if (result) {
            result = JSON.stringify(result);
            localStorage.setItem(key, result);
        }
        return result;
    }
}

我正在尝试这样使用它:

var data = fetch('projects-delivered', function() {
    var result;
    d3.json('/projects/delivered.json', function(data) {
        result = formatDates(data);
    });
    return result;
});

虽然数据总是未定义的。我是否需要传入另一个回调，或者如何同步？或者，这对于 JavaScript 的异步特性来说甚至是不可能的吗？

Answer 1

您的 AJAX 异步运行，因此您的回调将始终返回 undefined。

您必须从 getData 函数中调用您的回调:

function fetch(key, getData, callback) {
    var result = localStorage.getItem(key);

    result ? callback(JSON.parse(result)) : getData(function (result) {
        result && localStorage.setItem(key, JSON.stringify(result));

        callback(result);
    }
}

像这样使用它:

fetch('projects-delivered', function (callback) {
    d3.json('/projects/delivered.json', function (data) {
        callback(formatDates(data));
    });
}, function (data) {
    // Use the data
});

---

或者，您可以从 fetch 函数中返回一个 promise:

function fetch(key, getData) {
    var result = localStorage.getItem(key);

    if (result) return Promise.resolve(JSON.parse(result));

    return new Promise(function (resolve) {
        getData(function (result) {
            result && localStorage.setItem(key, JSON.stringify(result));

            resolve(result);
        });
    });
}

然后使用返回的 promise :

var promise = fetch('projects-delivered', function (callback) {
    d3.json('/projects/delivered.json', function (data) {
        callback(formatDates(data));
    });
});

promise.then(function (data) {
    // Use the data
});