我正在尝试通过创建localForage的全局实例来向localForage Web组件添加pure-form支持:
// 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>
在内部,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
是否需要回调,如果需要,请相应地修改代码......
答案 0 :(得分:4)
@ Dave-Newton在评论中指出:
如果不查看源文档或文档,就无法分辨。也就是说,几乎所有异步调用都需要回调或使用promises。
基于此,我创建了两个函数来包含对.getItem
和.setItem
的调用,并检查它们的响应。如果他们返回承诺的实例,则会使用.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
}
});
实施here