Как использовать localForage синхронно

Question

У меня есть мобильное приложение Cordova, которое хранит автономные данные в localStorage. Недавно пользователи начали получать сообщение об ошибке QUOTA_EXCEEDED_ERR, так как localStorage имеет ограничение 5 МБ. Я решил использовать фреймворк "localForage", но заметил, что он работает асинхронно. Поскольку я не хочу переписывать все мое сложное приложение, упакованное в функции обратного вызова, я хотел знать, есть ли какой-то способ использовать "localForage" синхронно (дождаться, пока функция getItem вернет значение).

Вот пример кода, который я пытаюсь сделать:

localforage.setItem('testKey', 'testValue', function() {
  var value = getValue('testKey');

  console.log(value); // here I get undefined, but I want to get a value
});

function getValue(key) { // I want this function to return value
  var result;
    localforage.getItem(key, function(value) {
    result = value;
  });

  return result;
}

Я хочу, чтобы getValue() возвращала значение без изменения какого-либо другого кода

Answer 1

https://localforage.github.io/localForage/, используйтеasync/await:

try {
    const value = await localforage.getItem('somekey');
    // This code runs once the value has been loaded
    // from the offline store.
    console.log(value);
} catch (err) {
    // This code runs if there were any errors.
    console.log(err);
}

Answer 2

По этой ссылке

localForage имеет двойной API, который позволяет вам использовать обратные вызовы в стиле Node или Promises. Если вы не уверены, какой из них вам подходит, рекомендуется использовать Обещания.

Таким образом, вы можете использовать любой из них, если хотите. при использовании обещаний вы можете использовать async/await ждать результата

localforage.setItem('testKey', 'testValue', async function() {
  var value = await getValue('testKey')

  console.log(value); // here I get undefined, but I want to get a value
});

 async function getValue(key) { 
  var result = await localforage.getItem(key);
  return result;
}

jsfiddle

Answer 3

Я не проверял это и не имел опыта работы с localForage, но, думаю, если вы установите в свой результат возвращаемое значение обратного вызова и вернете его, это то, что вы ищете

function getValue(key) { 
  var result = localforage.getItem(key, function(err, value) {
    return value;
  });
  return result;
}

Answer 4

Как вы упомянули, ваша проблема не связана с localforage. Localforage является асинхронным, поскольку он запускается в браузере, и вы не хотите, чтобы пользовательский интерфейс зависал, пока вы выполняете серверную часть, например, вызовы сохраняемости.

Уже обсуждался синхронный вызов асинхронной функции: синхронный вызов асинхронной функции Javascript.

Решение 1. Сделайте ваши функции асинхронными

если вы можете сделать свою функцию асинхронной, это, вероятно, лучший способ.

          localforage.setItem('testKey', 'testValue', async function() {
        console.log(await getValue('testKey')); 
    })


    getValue = async function(key) => await localforage.getItem(key);
  

Решение 2. Используйте setTimeout()

          localforage.setItem('testKey', 'testValue', function() {
        console.log(getValue('testKey'));
    });


    function getValue(key) { 
        let result;
        localforage.getItem(key, value => {
            result = value);
        });

        const update = () => {
             if("undefined" === typeof result) setTimeout(update, 100)
        }

        update();       
      
        return result;
    }

Answer 5

localforage.setItem('testKey', 'testValue', async function() {//declare function as async
  var value = await getValue('testKey'); //wait for the value

  console.log(value); // "testValue" value should show in console
});

//declare function as async
async function getValue(key) {
  var result = await localforage.getItem(key); //wait for the localforage item

  return result;
}

JSFiddle здесь: https://jsfiddle.net/mvdgxorL/