массив не хранится в `localStorage` при использовании` callback` - PullRequest
0 голосов
/ 28 мая 2018

Я пытаюсь сохранить item в массиве newItemList вместе с текущим часом и объектом, который я получаю с сервера как ответ JSON, который я анализирую в объект js.Это просто означает, что типичный элемент newItemList будет [item, 13(present_hour), obj]

. Вот код,

 var item;
 //some code to obtain item

 chrome.storage.local.get({'itemList':[]}, function(item){
   var newItemList = item.itemList;
   var d = new Date();

   if (isItemInArray(newItemList,item) == -1) {
     //api call function as callback

     apiCall(function(result){
         newItemList.push([item,d.getHours(),result]);
     });

   } else {
     var indexOfitem = findItem(newItemList,item);//finding item in the array
     if(//some condition){

       apiCall(function(result){
           newItemList[indexOfTab][1] = d.getHours();
           newItemList[indexOfTab][2] = result;
       });

     } else {
       var indexOfitem = findItem(newItemList,item);
       storedApiCall(newItemList[indexOfTab][2]);//sending the stored JSON response
     }
  }
 chrome.storage.local.set({itemList: newItemList});
 })

 function apiCall(callback){
    //API call, to obtain the JSON response from the web server
   var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
   if (this.readyState == 4 && this.status == 200) {
     var myObj = JSON.parse(this.responseText);//parsing the JSON response to js object

      callback(myObj);
      storedApiCall(myObj);//this function just works fine
     }
    };
  xhttp.open("GET", "example.com", true);
  xhttp.send();
 }

newItemList не сохраняется в локальном хранилище.Он содержит только один элемент, [item, present hour, obj(from present apiCall)].Вот почему, только часть кода if выполняется каждый раз, приводя к вызовам API каждый раз, делая часть else устаревшей.

Я прочитал о callback из многих известных вопросов, задаваемых по поводу asynchronous calls, но нет подключенного локального хранилища с callbacks.До реализации callback, newItemList сохранялся в локальном хранилище, но я не смог получить obj из ответа JSON в первый раз, что является типичным поведением asynchronous calls.Предложить изменения, если они есть.

Ответы [ 2 ]

0 голосов
/ 28 мая 2018

Я думаю, что когда выполнение прибывает в строку chrome.storage.local.set ({itemList: newItemList}); , переменная еще не установлена, поскольку XMLHttpRequest Если асинхронно, вы должны добавить chrome.storage.local.set в функцию обратного вызова или использовать обещание, а затем установить значение локального хранилища

0 голосов
/ 28 мая 2018

Эта строка выполняется до вызова функций, переданных вашим вызовам apiCall (т.е. с ее начальным значением item.itemList):

chrome.storage.local.set({itemList: newItemList});

Это происходит потому, что обратные вызовы обычно вызываются после некоторогоасинхронное действие завершается.В вашем случае они будут вызваны после того, как будет выполнена любая операция, выполняемая apiCall, например, получен HTTP-ответ на API.

Так что, если вы переместите эту строку в эти функции обратного вызова, то в конце после васмутировав newItemList, вызов set на chrome.storage.local будет выполнен с примененными изменениями (например, newItemList.push([item,d.getHours(),result])):

chrome.storage.local.get({'itemList':[]}, function(item){
    var newItemList = item.itemList;
    var d = new Date();

    if (isItemInArray(newItemList,item) == -1) {
      //api call function as callback

      apiCall(function(result){
          newItemList.push([item,d.getHours(),result]);
          chrome.storage.local.set({itemList: newItemList});
      });

    } else {
      var indexOfitem = findItem(newItemList,item);//finding item in the array
      if(//some condition){

        apiCall(function(result){
            newItemList[indexOfTab][1] = d.getHours();
            newItemList[indexOfTab][2] = result;
            chrome.storage.local.set({itemList: newItemList});
        });

      } else {
        var indexOfitem = findItem(newItemList,item);
        storedApiCall(newItemList[indexOfTab][2]);//sending the stored JSON response
      }
    }
})
...