issue with an asynchronous while in WinJS

Question

I have an app which invokes a WebService (callPathsToMultiTiffWS) which have two possibilities:

• complete = true
• complete = false

in the case complete = false I want to show a dialog which notifies to user than webService failed and two buttons:

• retry action (reinvoke WS)
• Exit

this is my code so far:

callPathsToMultiTiffWS(UID_KEY[9], stringCapturePaths, UID_KEY[1], UID_KEY[2], UID_KEY[3], UID_KEY[4], UID_KEY[5], UID_KEY[6]).then(
                        function (complete) {

                            if (complete == true) {//if true, it stores the id of the picture to delete
                                Windows.UI.Popups.MessageDialog("WS executed successfully", "Info").showAsync().then(function (complete) {window.close();});
                            } else {
                                var messageDialogPopup = new Windows.UI.Popups.MessageDialog("An error occur while calling WS, retry??", "Info");
                                messageDialogPopup.commands.append(new Windows.UI.Popups.UICommand('Retry', function () { /*code for recall element*/ }));
                                messageDialogPopup.commands.append(new Windows.UI.Popups.UICommand('Exit', function () { /*code for exit*/ }));
                                messageDialogPopup.showAsync();

                                _divInput.innerHTML = "";
                            }
                        },
                        function (error) { console.log("function error"); });

This works good so far, but I want the recall feature working so I thought to embedd my code inside a loop like this

            var ban = true;
            while (true) {

                callPathsToMultiTiffWS(UID_KEY[9], stringCapturePaths, UID_KEY[1], UID_KEY[2], UID_KEY[3], UID_KEY[4], UID_KEY[5], UID_KEY[6]).then(
                    function (complete) {
                        if (complete == true) {//if true, it stores the id of the picture to delete
                            Windows.UI.Popups.MessageDialog("WS executed successfully", "Info").showAsync().then(function (complete) { window.close(); });
                        } else {
                            var messageDialogPopup = new Windows.UI.Popups.MessageDialog("An error occur while calling WS, retry??", "Info");
                            messageDialogPopup.commands.append(new Windows.UI.Popups.UICommand('Retry', function () { ban == true; }));
                            messageDialogPopup.commands.append(new Windows.UI.Popups.UICommand('Exit', function () { ban == false; }));
                            messageDialogPopup.showAsync().then(function (complete) {
                                console.log("no ps no");
                            });
                    }
                },
                function (error) { console.log("function error"); });

                if (ban == false) break;
            }

this loop executes the webService, but it doesn't wait for user interaction to trigger the webservice by touching one of the buttons, it is an endless loop with calls to my webService, how to fix this??

thanks in advance for the support

Answer 1

If I'm not missing something, it looks like the error is caused because your code isn't designed to run the next set of tasks after the asynchronous call to showAsync returns. Because the call to showAsync is non-blocking, the while loop will start over again and make another call to the Web service. And because THAT call (callPathsToMultiTiffWS) is also non-blocking, the loop will start over again, triggering another call to callPathsToMultiTiffWS. And over again, and again.

My recommendation is to break out the next call to the Web service so that it will only be triggered when the user makes a selection. If you separate your concerns (move the calls to the Web service into different function or module than the UI that informs the user of an issue), then you can probably fix this.

Kraig BrockSchmidt has a great blog post about the finer details of Promises: http://blogs.msdn.com/b/windowsappdev/archive/2013/06/11/all-about-promises-for-windows-store-apps-written-in-javascript.aspx

-edit-
Here's some code that I wrote to try to demonstrate how you might accomplish what you're trying:

function tryWebServiceCall(/* args */) {
    var url = "some Web service URL";

    return new WinJS.xhr({ url: url }).then(
        function (complete) {
            if (complete) {
                return new Windows.UI.Popups.MessageDialog("WS executed successfully", "Info").showAsync().then(
                    function () { /*do something */ });
            } else {
                var messageDialogPopup = new Windows.UI.Popups.MessageDialog("An error occur while calling WS, retry??", "Info");
                messageDialogPopup.commands.append(new Windows.UI.Popups.UICommand('Retry', function () {
                    return tryWebServiceCall( /* args */);
                }));
                messageDialogPopup.commands.append(new Windows.UI.Popups.UICommand('Exit', function () { return; }));
                return messageDialogPopup.showAsync();
            }
        });
}