3

我正在尝试通过创建 localForage 的全局实例来向纯形式Web 组件添加localForage支持：

// create a global appStorage object that mimics localStorage API (greater storage)
window.appStorage = localforage.createInstance({
    driver: [
        localforage.INDEXEDDB,
        localforage.WEBSQL,
        localforage.LOCALSTORAGE
    ],
    name: 'product-name',
    version: 1.0,
    storeName: 'app'
});

storage并通过属性将其分配给纯形式的实例：

<pure-form src="path-to-schema.json" storage="appStorage"></pure-form>

在内部，纯形式执行window[self.storage]以获取存储对象的句柄并使用.getItem,.setItem来同步设置和检索值。

麻烦的是 localForage 是异步的，这意味着.getItem，.setItem期望通过回调返回值。因此我目前的逻辑将不起作用：

// get value from web storage
var storedContent = window[self.storage].getItem('item-key');

我意识到我可以将调用包装在 Promise 中，但就其本身而言，纯形式不需要承诺，我不想为此添加该依赖项。

我想做的是检查是否.getItem或.setItem需要回调，如果是，请相应地修改代码......

4

1 回答 1

5

正如@Dave-Newton 在评论中指出的那样：

如果不查看源代码或文档，就无法判断。也就是说，几乎所有异步调用都需要回调或使用 Promise。

基于此，我创建了两个函数来包装调用.getItem并.setItem检查它们的响应。如果他们返回一个Promise实例，它会使用 - 解析.then，否则正常执行回调：

/**
 * Get a value from web storage regardless of whether it's sync or async
 */
function getStorageItem(storage, key, callback) {

    if (typeof callback !== 'function') throw new Error('Invalid callback handler');

    var result = storage.getItem(key);

    if (result instanceof window.Promise) {
        result.then(callback);
    }
    else {
        callback(result);
    }
}

/**
 * Set a value in web storage regardless of whether it's sync or async
 */
function setStorageItem(storage, key, value, callback) {

    var result = storage.setItem(key, value);

    if (result instanceof window.Promise && callback) {
        result.then(callback);
    }
    else if (callback) {
        callback();
    }
}

这意味着我现在可以这样做：

// get value from web storage
getStorageItem(webStorage, key, function(value) {

    if (value) {
        // whatever I want with the value
    }
});

在这里实现

于 2017-10-28T21:11:11.920 回答