jQuery.Deferred() 无法正常工作

Question

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

这是代码：

$(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);

我是否做错了什么？还是我在这段代码中遗漏了什么？谁能告诉我这段代码有什么问题。

Answer 1

您期望 dbConnection 到 return 和 promise，但不要从该函数中得到 return 任何东西 。 Return 立即承诺（下面最后一行）而不是在所有回调中：

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/

您的各种回调只是解决或拒绝延迟。之前的只读承诺 returned 然后触发下一个操作。

注意：对于这两种错误情况，您可能应该使用 reject（除非您实际上想继续使用空数据库值）。例如

    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() 无法正常工作

jQuery.Deferred() is not working properly

javascript

jquery

indexeddb