javascript - 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 返回一个 promise，但不要从该函数返回任何内容。立即返回 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/

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

注意:对于这两种错误情况，您可能应该使用 reject (除非您实际上想要继续使用 null db 值)。例如

    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);
  });