Javascript异步到同步任务

Question

I have the following code (these codes are in separated js files ) :

Code 1 (home.js):

alert('1');
BeginGetDashboardsMethod();
alert('5');

Code 2(script.js) :

function BeginGetDashboardsMethod(){

var stop = 'false';
alert('2');
try {        
        Service.GetDashboardsMobile("" + curr_cod_user, SuccessGetDashboardMethod, ErrorGetDashboardMethod);

}
catch (e) {

}
function SuccessGetDashboardMethod(result) {
    alert('3');        
    json = result;

    json = JSON.parse(json);        
    ListDashboards(json);
}
function ErrorGetDashboardMethod(err) {
    alert(JSON.stringify(err));
}

function ListDashboards(json) {
    alert('4');
    for (var i = 0; i < json.Dashboards.length; i++) {
        if (json.Dashboards.length === 1)
            Items = "[{key:\'" + json.Dashboards[i].OBV_ST_TITULO + "\', title:\'" + json.Dashboards[i].OBV_ST_TITULO + "\'}]";
        else {
            if (i == 0) {
                Items += "[{key:\'" + json.Dashboards[i].OBV_ST_TITULO + "\', title:\'" + json.Dashboards[i].OBV_ST_TITULO + "\'} ";
            }
            else if (i + 1 == json.Dashboards.length) {
                Items += ",{key:\'" + json.Dashboards[i].OBV_ST_TITULO + "\', title:\'" + json.Dashboards[i].OBV_ST_TITULO + "\'}] ";
            }
            else {
                Items += ",{key:\'" + json.Dashboards[i].OBV_ST_TITULO + "\', title:\'" + json.Dashboards[i].OBV_ST_TITULO + "\'} ";
            }
        }

    }
    obj = eval(Items);
}     }

My code works asynchronous. After Service.GetDashboardsMobile call the code "skip" Success callback and execute alert(5); while executing callback. Is there a way to make that functions synchronous?

To be more exactly, I want that sequence : alert('1');-->alert('2');-->alert('3');-->alert('4');-->alert('5')

Answer 1

Welcome to the new world of Promises.

script.js

alert("1"); // script 1 loaded

function $dashboard(user) {

  function getDashboard(start, limit) {
    var user = user;

    return new Promise(function(pass, fail) {

       if( Math.random()*3 > 2 ) {
         fail(new Error("boo hoo"));
       } else {
         window.setTimeout(pass, 5000, '{"time": 5000, "content": "foo"}');
       }
    });
  }

  function parseData(json) {
    return new Promise(function(pass, fail) {
      try {
        pass(JSON.parse(json));
      } catch(e) {
        fail(e);
      }
    });
  }

  function printData(data) {
    alert(JSON.stringify(data));
    return true;
  }

  return {
    get: getDashboard,
    parse: parseData,
    print: printData
  };
}

home.js

(function(d,w,$) {

alert("2"); // script 2

var dashboard = $("mcfoobar");

dashboard
  .get(0, 100)
  .then(function(sData) {
     alert("3"); // data retrieved
     return dashboard.parse(sData); 
  })
  .then(function(oData) {
     alert("4"); // data parsed
     return dashboard.print(oData);
  })
  .then(function(result) {
     alert("5"); // data printed
  })
  .catch(function(err) {
    alert(JSON.stringify(err)); // Something went wrong
  });

}(document, window, $dashboard));

Notes:

• Why all the alerts? Surely console.log(..) is a much better solution. Certainly a lot less clicking.
• You will have to make sure script.js is loaded. Hopefully home.js has some sort of el.onload event on the <script> element of script.js.
• For backward compatibility you will need to have a definition of Promises just in case. But that should be easy to implement. You can use v8 version if it doesn't already exist in some compatibility library.
• Make sure you note how values are changed in the chain by returning different values in the .then() function. To keep original values simply forward parameters.