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, но не возвращают ничего от этой функции. Возвращение обещание немедленно (последней строке ниже), а не внутри всех обратных вызовов:

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 для двух случаев ошибок (если вы действительно не хотите выполнять нулевое значение 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); 
    });