Chaining IndexedDB in WinJS

Question

I'm writing a Windows 8 app in HTML / JS and have a button on a form with a click event handler. When clicked the first thing the button does is this:

WinJS.Promise.then(openDB()).done(console.log("PROMISE DONE"));

The openDB function looks like this:

function openDB() {
    console.log("openDb...");
    var req = indexedDB.open("MyDB", 1);
    req.onsuccess = function(evt) {
        var data = evt.target.result;
        console.log("openDb DONE");
    }
}

(I also have onerror and onupgradeneeded callbacks on the req object but have left these out for brevity).

I'm clearly misunderstanding how promises are supposed to work but I thought that I could chain multiple THEN calls on a promise, and the final call DONE would only fire when all the THEN calls have executed. Problem is that the console shows 'openDb ...', followed by 'PROMISE DONE', followed by 'OpenDb done'. So the DONE call is being executed before the THEN call. Can anyone explain why this is happening?

score 1 · Accepted Answer · answered Jul 22 '13 at 18:14

Your fundamental issue here is that the "then" method returns a new promise. If the function you called returns a promise, that's the promise that's returned (and thus chained off). If your function does not return a promise, a new (already completed) promise is returned that give you the value that's returned.

Looking at your openDB function, what does it return? Actually, it returns undefined. And more importantly, it kicks off async work and then returns immediately; the async operation doesn't complete until later. Thus, you get the behavior you're seeing.

So what you need to do is get openDB to return a promise that doesn't complete until the database open operation completes. WinJS promises are really bad at this, so the API is ugly. Hopefully they'll fill in the missing piece in Win8.1.

So, you need to create a new promise, and complete it when the async work's done. That looks something like this:

function openDB() {
    var complete;
    var = new Promise(function (c, e, p) {
        complete = c;
    });

    console.log("openDb...");
    var req = indexedDB.open("MyDB", 1);
    req.onsuccess = function(evt) {
        var data = evt.target.result;
        console.log("openDb DONE");
        complete(data);
    }

    return p;
}

The new Promise(function (c, e, p) { ... }) call creates a new promise object. The function you pass is itself passed three functions - one to call on successful completion of the object (c for complete), one to call if the promise unsuccessfully completes (e for error), and one to call to report progress (p for progress). We sock away the completion callback into a variable here for use later.

Now, in the success callback from indexedDB, note that we invoke the complete callback, passing the data we got. This will set the promise to completed state.

Finally, we return the created promise. Note that this return happens synchronously; the function returns before the onsuccess handler gets called.

This should get you what you want - it'll hold off the promise chain until the database open completes. You should probably hook up the error handler to something as well.

Now, having done this, the call to WinJS.Promise.then() is also incorrect, or at least unnecessary. You should instead just do:

openDB().done(function () { console.log('Promise Done'); });

Since openDB itself returns a promise, you don't need the extra wrapping in another promise you're doing.

Wow! Amazing response. Thanks. – markp3rry Jul 23 '13 at 08:09 — markp3rry, Jul 23 '13 at 08:09

Chaining IndexedDB in WinJS

1 Answers1