(JQuery) Ajax Use When

前言

在翻找旧程式中发现了一个旧的写法，是需要拿到两个Ajax Respond 再做后续的动作，两个Ajax 也没有先后顺序，但是旧的写法是在两个Ajax 下Flag 然后判断Flag 去做后续的事情，

所以遇到了点问题，所以研究了一下Ajax Promise 的写法。

内文

$.ajax({
         url : sourceFewSourceCodeUrl,
         method : "GET",
         success : function(sourceCodeDetail) {

       loadSourceSuccess = true;
       renderStickyWindowAndSyntaxhighlight();
     },
         error : function() {
            loadSourceSuccess = false;
         }
 });

 $.ajax({
     url : targetFewSourceCodeUrl,
     method : "GET",
     success : function(sourceCodeDetail) {

       loadTargetSuccess = true;
       renderStickyWindowAndSyntaxhighlight();
     },
     error : function() {
       loadTargetSuccess = false;
     }
  });

  function renderStickyWindowAndSyntaxhighlight() {
      var loadSuccess = (loadSourceSuccess && loadTargetSuccess);
          var loadFailure = (loadSourceSuccess == false || loadTargetSuccess == false)

      if (loadSuccess) {
          //TODO SOME
        }
  }

上面是原先的写法，等于会跑两次 renderStickyWindowAndSyntaxhighlight() ，因为是非同步所以Ajax哪个先回来也不一定，所以改成 $.when 的写法让他同步

var sourcePromise = $.ajax(sourceFewSourceCodeUrl);
var targetPromise = $.ajax(targetFewSourceCodeUrl);

//用 When 來同時拿到 Ajax Respond
$.when(sourcePromise, targetPromise).done(function(sourceInformation, targetInformation) {

    renderStickyWindowAndSyntaxhighlight();

}).fail(function(sourceInformation, targetInformation) {
    //只要有一個 Fail 就直接報錯
    MessageBox.error(LOAD_SOURCE_FAILURE);
    MessageBox.error(LOAD_TARGET_FAILURE);
});

.上面的写法就可以同时拿到Respond再去做 renderStickyWindowAndSyntaxhighlight() ，就不用跑两次啰!

然后Fail 的部分只要一个Fail 就会进去了，后续拿到的结果都会变成false ，会有以下的问题，例如:

A的 callback : true

B 的 callback : false

C的 callback : true

使用$.when()方法会得到

[when] (fail callback): a:  true , b:  false , c:  false