(JQuery) Ajax Use When

2018-01-30

2689
0
JQuery

前言

在翻找舊程式中發現了一個舊的寫法，是需要拿到兩個 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()方法會得到