Question

我正在尝试实现indexedDB。为此，我需要使用$.Deferred来获取数据库创建的状态。但问题是，Differed没有按预期工作。 Here is the fiddle，您可以在控制台中找到该过程。

以下是代码：

＆＃13;

$(function($) {
  var table = 'price';
  $.when(dbConnection('cw', table)).done(function(db) {
    console.log(db);
    var data = [];
    dbInsert(db, data, table);
  });

  function dbConnection(dbname, table) {
    var dfd = $.Deferred();
    var request = indexedDB.open(dbname);

    request.onupgradeneeded = function() {
      // The database did not previously exist, so create object stores and indexes.
      var db = request.result;
      var store = db.createObjectStore(table, {
        keyPath: "id"
      });
      var styleCode = store.createIndex("style_code", "style_code");
      var colorCode = store.createIndex("color_code", "color_code");
      var size = store.createIndex("size", "size");
      var price1 = store.createIndex("price1", "price1");
    };
    request.onsuccess = function() {
      db = request.result;
      console.log(request.result);
      dfd.resolve(db);
      return dfd.promise();
    };
    request.onerror = function() {
      report(request.error);
      console.log(request.error);
      dfd.resolve(null);
      return dfd.promise();
    };
    request.onabort = function() {
      report(request.error);
      console.log(request.error);
      dfd.resolve(null);
      return dfd.promise();
    };
  }

  function dbInsert(db, data, table) {
    var tx = db.transaction(table, "readwrite");
    var store = tx.objectStore(table);
    $.each(data, function(i, rows) {
      var style = rows['style-code'],
        color = rows['color-code'],
        size = rows['size'],
        price = rows['price1'];
      store.put({
        id: i,
        style_code: style,
        color_code: color,
        size: size,
        price1: price
      });
    });
    tx.oncomplete = function() {
      console.log('Data inserted successfully.');
    };
  }

})(jQuery);

＆＃13;

我是否做错了什么？或者我在这段代码中遗漏了什么？任何人都可以告诉我这段代码有什么问题。

Answer 1

您希望dbConnection返回promise，但不要从该函数返回任何。立即返回承诺（下面的最后一行），而不是在所有回调中：

function dbConnection(dbname, table) {
    var dfd = $.Deferred();
    var request = indexedDB.open(dbname);

    request.onupgradeneeded = function() {
      // The database did not previously exist, so create object stores and indexes.
      var db = request.result;
      var store = db.createObjectStore(table, {
        keyPath: "id"
      });
      var styleCode = store.createIndex("style_code", "style_code");
      var colorCode = store.createIndex("color_code", "color_code");
      var size = store.createIndex("size", "size");
      var price1 = store.createIndex("price1", "price1");
    };
    request.onsuccess = function() {
      db = request.result;
      console.log(request.result);
      dfd.resolve(db);
    };
    request.onerror = function() {
      report(request.error);
      console.log(request.error);
      dfd.resolve(null);
    };
    request.onabort = function() {
      report(request.error);
      console.log(request.error);
      dfd.resolve(null);
    };
    return dfd.promise();
}

更新了JSFiddle： http://jsfiddle.net/TrueBlueAussie/9kjcm49b/2/

您的各种回调只是解决或拒绝延期。先前返回的只读承诺会触发下一个操作。

注意：对于两种错误情况，您应该使用reject（除非您确实希望继续使用null db值）。 e.g。

    request.onerror = function() {
      report(request.error);
      console.log(request.error);
      dfd.reject("Error occurred");
    };
    request.onabort = function() {
      report(request.error);
      console.log(request.error);
      dfd.reject("Operation aborted");
    };

并使用如下：

  $.when(dbConnection('cw', table)).done(function(db) {
    console.log(db);
    var data = [];
    dbInsert(db, data, table);
  }).fail(function(message){
         alert(message);
  });

jQuery.Deferred（）无法正常工作

1 个答案: