Question

See the following line of code:

WinJS.xhr({ url: "http://someurl.com" }).then(
          function fulfilled(result)
          {
             if (result.status === 200)
             {
                resDiv.style.backgroundColor = "lightGreen";
                resDiv.innerText = "Success";
             }
          });

As far as I understand, when WinJS.xhr has completed whatever it does then execute the anonymous function ‘fulfilled’ with argument ‘result’

Coming from Java/C++ background, I’m extremely confused with how this code works – how is ‘result’ being passed to this function? Where does it say anything about what ‘result’ is? How can I know what type of object ‘result’ is and how it has a ‘status’ member?

Answer 1

I’m going to break my answer into two parts: The first concerns the actual execution model of Javascript, and the second which concerns the high-level expression as written.

The Javascript Execution Model

1. WinJS evaluates to an object.
2. That object has a prototype which contains an xhr member which WinJS.xhr evaluates to. That member is a function, which we will refer to as A below so that we can keep clear what exactly is going on.
3. Before we get to that, { url: "http://someurl.com" } returns an object which we will refer to as B.
4. That object B has a property called url.
5. A(B) calls a function A with a value B as an argument. It returns an object that we will refer to as C.
6. That object C has a prototype which contains a member named then. C.then happens to evaluate to a function. That function we will refer to as D.
7. function fulfilled(result) {...} returns a function that we will refer to as E. It can also be referred to as fulfilled but that fact is not used in this program fragment.
8. D(E) calls a function D with a value E as an argument. Nothing is done with the return value.

The high-level view

There are three functions here; one is a callback (called fulfilled), and the other two may be called “methods”- one xhr of the WinJS global object, and then of a promise object.

WinJS.xhr({ url: "http://someurl.com" }) creates and returns that promise object. You can convince yourself of this by consulting the documentation.

The promise object has a method called then which registers what you can think of as an event handler for when the promise is done. The value result – used in that callback registered in then comes from whatever is making that promise done by in fact calling the method done on that promise. You don’t see the code that does that because it’s someplace in the implementation of WinJS.xhr.

What WinJS.xhr is doing is performing a network request. When that network request is done it will signal the result of that network request (which according to the documentation is an XMLHttpRequest object) through the promise by calling the done() method on that promise. That in-turn calls the callback we registered with the then() method.