$ .whenを使用して最初のajaxを実行し、$ .when（）で次のコマンドを実行します。

Question

これは複数回尋ねられましたが、$.whenを使用して$.ajaxを実行して問題が発生しています。

以下のサンプルコードでは、最初のajaxを$.when()に、次に$.ajaxを.done()の内側に実行したいとします。

var api = { 
    getFoo: function(callback) { 
     $.when(this.getBar()).done(function() { 
      chrome.storage.local.get(['bar'], function(data) { 
       // omitted some code here for brevity 
       $.ajax({ 
        type: 'GET', 
        url: /api/foo/, 
        dataType: 'json' 
       }).done(function(result) { 
        console.log('success', 'went here!'); 
       }).fail(function(request) { 
        console.log('failed', 'went here!'); 
       }); 
      }); 
     }); 
    }, 
    getBar: function() { 
     chrome.storage.local.get(['data1'], function(data) { 

      if(typeof data['data1'] !== 'undefined') { 
       // omitted some code here for brevity 
       $.ajax({ 
        type: 'POST', 
        url: /api/bar/, 
        data: data['data1'], 
        dataType: 'json' 
       }).done(function(result) { 
        console.log('success', 'went here!'); 
       }).fail(function(xhr, status, error) { 
        console.log('failed', 'went here!'); 
       }); 
      } 
     }); 
    } 
} 

私は、コードを実行した

、二 $.ajaxは最初 $.ajaxが終了するのを待たずに、すぐに実行されます。どうか、誰かが正しい方法で私をリダイレクトできますか？

Answer 1

我々はこれを試して非同期アクション
のための約束を返す必要があります：

getFoo: function(callback) { 
    this.getBar().then(function(){ 
     chrome.storage.local.get(['bar'], function(data) { 
      // omitted some code here for brevity 
      $.ajax({ 
       type: 'GET', 
       url: /api/foo/, 
       dataType: 'json' 
      }).done(function(result) { 
       console.log('success', 'went here!'); 
      }).fail(function(request) { 
       console.log('failed', 'went here!'); 
      }); 
     }); 
    }); 
}, 
getBar: function() { 
    var deferred = $q.defer(); 
    chrome.storage.local.get(['data1'], function(data) { 
     if(typeof data['data1'] !== 'undefined') { 
      // omitted some code here for brevity 
      $.ajax({ 
       type: 'POST', 
       url: /api/bar/, 
       data: data['data1'], 
       dataType: 'json' 
      }).done(function(result) { 
       deferred.resolve(result); 
      }).fail(function(xhr, status, error) { 
       deferred.reject(error); 
      }); 
     } 
    }); 
    return deferred.promise; 
} 

Answer 2

jQuery - when()ページに良い例があります。ここでは簡単な例です：

var api = { 
    flag: $.Deferred(), 
    getFoo: function(callback) { 
     $.when(this.flag).done(function() { 
      console.log('getFoo'); 
     }); 
    }, 
    getBar: function() { 
     console.log('getBar'); 
     this.flag.resolve(); 
    } 
}