JavaScriptでasync AJAXリクエストを使用してasync indexedDBを管理する

Question

IndexedDBでAJAX応答が完了するまで待機する方法。私は荒波コードを持っています。もし私がそれを非同期に実行すると、2番目のトランザクションは、最初のレスポンスから最後のアイテムへのすべてのレスポンスをリンクします。私は報告書の両方の店舗には、ログイン時にサーバーからの領収書&を埋めるためにうそをつくので、必要に応じてオフラインで作業することができます。私はそれを正常に動作させるならば、それは、しかし、私はそれを避けたいので、アプリが少し凍っているので、ユーザーエクスペリエンス側から悪いです。誰か提案がありますか？

var DBRequest = window.indexedDB.open(IDBName, IDBVersion); 
DBRequest.onerror = function(event) { 
    console.log("error: "); 
}; 

DBRequest.onsuccess = function(event) { 
    var response = DBRequest.result; 
    SExpenses.removeAll(); 
    var z=0; 
    Ext.Ajax.request({ 
     url:App.url.expenses, 
     method: 'GET', 
     async:true, 
     params: { 
      user_guid: App.user.guid, 
      limit: 25 
     }, 
     success: function(res){ 
      var result = Ext.decode(res.responseText); 
      var dataIDB = response.transaction(["ReportDataLocal"],'readwrite').objectStore("ReportDataLocal"); 
      dataIDB.clear(); 
      var receiptIDB = response.transaction(["ReceiptsLocal"],'readwrite').objectStore("ReceiptsLocal"); 
      receiptIDB.clear(); 

      var savedID, savedRecID; 

      Ext.each(result.data, function(item){ 

       z++; 
       SExpenses.insert(0,item); 
       var newObject = response.transaction(["ReportDataLocal"], "readwrite") 
       .objectStore("ReportDataLocal") 
       .add({DESCRIPTION: item.DESCRIPTION, BILLING_QTY: item.BILLING_QTY, 
         TRAVEL_EXPENSES: item.TRAVEL_EXPENSES,REQUEST_TYPE_ID: item.REQUEST_TYPE_ID, 
        SERVER_ID: item.SERVER_ID 
        }); 

       newObject.onsuccess = function(event){ 

        savedID = event.target.result; 
        SExpenses.findRecord('SERVER_ID',item.SERVER_ID).set({ID:savedID}); 
        Ext.Ajax.request({ 
         url: App.url.receipts, 
         async: true, 
         method: 'GET', 
         params: { 
          Request_Log_RC: item.SERVER_ID 
         }, 
         success: function(retrieve){ 

          var result2 = Ext.decode(retrieve.responseText); 

          Ext.each(result2.data,function(item2){ 
           SReceipt.add(item2); 
           var newReceiptIDB = response.transaction(["ReceiptsLocal"],'readwrite') 
           .objectStore("ReceiptsLocal"); 

           newReceiptIDB.add({EXPENSE_AMOUNT: item2.EXPENSE_AMOUNT, EXPENSE_CURRENCY_ID:item2.EXPENSE_CURRENCY_ID, 
                EXPENSE_NAME: item2.EXPENSE_NAME, REPORT_ID: savedID, CURRENCY_ABB: item2.CURRENCY_ABB, 
                EXPENSE_IMAGE: null, SYNCED: true, DELETED: item2.DELETED, 
                SERVER_ID: item2.SERVER_ID, SERVER_REPORT_ID: item.SERVER_ID, 
                EXPENSE_EXCHANGE_RATE: null 
                }); 
           newReceiptIDB.onsuccess = function(event){ 
            savedRecID = event.target.result; 
            SReceipt.findRecord('SERVER_ID',item2.SERVER_ID).set({ID:savedRecID}); 

           }; 
          }); 
         } 
        }); 
       }; 
      }); 
     } 
    }); 

}; 

Answer 1

だから、あなたが何をする必要があるかのアイテムをバインドされ、https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

基本的には、これまでに複数のアイテムをループ非同期呼び出しを行うと、あなたがバインド元のコールのインデックスを維持するために、コールバックが必要な場合インデックスを渡して渡します。

var returnData = []; 
var a = 10; 
for(var i = 0; i < a.length; i++) { 
    someAysncCall(function(data){ 
     returnData[i] = data; 
    }).bind(null, i); 
} 

これは、コールバックの範囲内でiを維持します。

あなたはこの

newObject.onsuccess = function(event){ 

       savedID = event.target.result; 
       SExpenses.findRecord('SERVER_ID',item.SERVER_ID).set({ID:savedID}); 
       Ext.Ajax.request({ 
        url: App.url.receipts, 
        async: true, 
        method: 'GET', 
        params: { 
         Request_Log_RC: item.SERVER_ID 
        }, 
        success: function(retrieve){ 

         var result2 = Ext.decode(retrieve.responseText); 

         Ext.each(result2.data,function(item2){ 
          SReceipt.add(item2); 
          var newReceiptIDB = response.transaction(["ReceiptsLocal"],'readwrite') 
          .objectStore("ReceiptsLocal"); 

          newReceiptIDB.add({EXPENSE_AMOUNT: item2.EXPENSE_AMOUNT, EXPENSE_CURRENCY_ID:item2.EXPENSE_CURRENCY_ID, 
               EXPENSE_NAME: item2.EXPENSE_NAME, REPORT_ID: savedID, CURRENCY_ABB: item2.CURRENCY_ABB, 
               EXPENSE_IMAGE: null, SYNCED: true, DELETED: item2.DELETED, 
               SERVER_ID: item2.SERVER_ID, SERVER_REPORT_ID: item.SERVER_ID, 
               EXPENSE_EXCHANGE_RATE: null 
               }); 
          newReceiptIDB.onsuccess = function(event){ 
           savedRecID = event.target.result; 
           SReceipt.findRecord('SERVER_ID',item2.SERVER_ID).set({ID:savedRecID}); 

          }; 
         }); 
        } 
       }); 
      }.bind(null, item); 

にバインドを追加する場合、それは私がこのようにそれを行う場合、私はエラー を得る