jQuery.Deferred（）无法正常工作

I'm trying to implement indexedDB. For that I need to use $.Deferred to get the status of database creation. But the problem is, Differed is not working as expected. Here is the fiddle, you can find the process in the console.

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

And here is the code:

这是代码:

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

Whether I'm doing anything wrong? or am I missing anything in this code?. Can anyone tell me what is wrong in this code.

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

1 个解决方案

#1

You are expecting dbConnection to return a promise, but do not return anything from that function. Return the promise immediately (last line below) and not inside all the callbacks:

您期望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();
}

Updated JSFiddle: http://jsfiddle.net/TrueBlueAussie/9kjcm49b/2/

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

Your various callbacks simply resolve or reject the deferred. The readonly promise returned earlier then triggers the next operation.

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

Note: You should probably use reject for the two error cases (unless you actually want to proceed with a null db value). e.g.

注意:对于两个错误情况,您可能应该使用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");
    };

and use like this:

并使用这样的:

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