2017-12-21 14 views
1

私のAjax .then()チェーンのコードに問題があります。予想通りに実行されません。Ajax complete()のin()チェーンが期待通りに実行されない

私のAjax機能は、スピナーをbeforeSend()に表示し、それをに隠して進行中のインジケーターを表示します。私はこれらが、スピナーをいつ表示するかを決めるためにキャプチャできるエンドポイントだと思いました。

function outer() { 

var promise = ajaxGetActivityId() 
      .then(function(data) { 
       outerFunction2(); 
      }); 

デバッガが

  1. 私はAjaxのメソッドのbeforeSend最初のショーに行くことを示しています。次のように

    function ajaxGetActivityId() { 
    
    var promise = $.ajax({ 
        type : "post", 
        dataType : "json", 
        url : '/myapp/activityId', 
        data : '', 
        beforeSend: function(){ 
         showLoading(); 
        }, 
        complete: function(){ 
         hideLoading(); 
        }   
    }); 
    
        return promise; // Return a promise from this function 
    
    } 
    

    この関数は、外側の関数により、.then()チェーンで呼び出されます スピナー、それは正しいです

  2. 私はの前にouterFunction2()になる私のAjaxリクエストが完了しました!その時点で、スピナーはまだ表示されている です。私は、私が保証しないと思った私は outerFunction2()に到達するまでAjaxの呼び出しが完了しました。
  3. その後、道をいくつかの点で、私はドキュメントからのAjax機能のcomplete()

答えて

1

に着く...

要求呼び出される関数
完全な終了します(成功とエラーのコールバックが実行された後)。

私もthen/doneよう後、他の約束ハンドラの実行を含んでいることを想像してみてください。

私はちょうど約束の決断を次々と結びつけるでしょう。例えば、completeを削除し、これは、他の約束解消ハンドラを実行する前にhideLoading()呼び出しが行われることを保証します

function ajaxGetActivityId() { 
    return $.ajax({ ... }) 
    .then(data => { 
     hideLoading() 
     return data 
    }) 
} 

してみてください。

+0

はい、それでした。驚くべきことですが、コード品質に悪影響を与えるコードはスパゲッティになり、Ajax関数でスピナーをコンパクトにカプセル化することはできません。ダウンストリーム操作の前に完了のためのプレースホルダーがなく、非常に直観的ではないことは恐ろしいことです。 –

関連する問題