等待直到ajax請求完成

Question

這是一個javascript函數：

  function getValue(key) {
    var value;
    switch(_options.myType){
      case "cookie":
        value = readFromCookie(key);
        break;
      case "localStorage":
        value = readFromLocalStorage(key);
        break;
      case "db":
        //return value from the server
        // how do I wait for the result?
        $.ajax({
            type: "GET",
            url: "123",
            data: { .... },
            success: function(data){
               value = data; 
            }
        });
        break;
    }
    return value;
  };

在發送ajax請求的情況下，我需要等待直到ajax請求已完成。 我該怎么做？

並不是說我不能在沒有計算值的情況下離開函數。 這意味着我無法將函數放置在success:內部success:處理程序將在以后返回值（或者我可能不明白？）。 因此，必須在函數getValue()進行計算。

更新

PS那么如何重構我的代碼以能夠在success:內部使用回調函數success:處理程序？ 這是代碼的第二部分：

MyClass123.prototype.myMethod = function(value) {
      //..............
      var var1 = this.getValue("key1");
      if (var1 == "123") { ... }
      else { .... }
      //..............
    }
  };

Answer 1

請參閱下面的后續內容

您可以使ajax請求同步，但這通常不是一個好主意（jQuery將不再支持它更長的時間）。

相反，使getValue接受回調：

function getValue(key, callback) {
   switch(_options.myType){
     case "cookie":
       setTimeout(function() {
           callback(readFromCookie(key));
       }, 0);
       break;
     case "localStorage":
       setTimeout(function() {
           callback(readFromLocalStorage(key));
       }, 0);
       break;
     case "db":
       //return value from the server
       // how do I wait for the result?
       $.ajax({
           type: "GET",
           url: "123",
           data: { .... },
           success: function(data){
              callback(data);
           }
       });
       break;
   }
}

請注意，我正在將setTimeout用於readFromCookie和readFromLocalStorage回調。 為什么？ 因為如果getValue 可能異步返回其值，則應該始終這樣做。 使用超時值為0 ，一旦控件將控制權交還給瀏覽器，瀏覽器應盡快執行此操作（盡管通常將其限制為不少於5到10毫秒）。

---

在下面重新發表您的評論：

你讀我寫的東西了嗎？ 我說由於某些原因我做不到。

我錯過了這一點，但是在所有應得的尊重下，您可以 。 它可能需要對代碼進行一些重構，但是您可以並且應該這樣做。 這就是現代Web應用程序的工作方式。 如果您的結構不支持該結構，則需要修復該結構。 您可以對請求使用async: false作為臨時解決方法，直到可以正確執行為止。 （嘿，我們都去過那里，必須做類似的事情。）請注意，它計划在很長的時間內退休（只是jQuery的支持，您仍然可以直接使用XHR進行同步請求）。

---

重新輸入更新的問題，以下是更新代碼的方法：

MyClass123.prototype.myMethod = function(value) {
  this.getState("key1", function(var1) {
    //                           ^--- Note the var becomes an arg
    if var1 == "123"{ ... }
    else { .... }
  });
};

請注意它實際變化的幅度。 相反，用於跟隨 getState調用的邏輯進入了傳遞給它的回調。

Answer 2

您可以通過指定async: false來使AJAX請求同步async: false 不建議這樣做，但可以這樣做。 如果絕對是在AJAX請求返回之前您的getValue()函數不應該返回的情況，那么使用async是async的方法。

$.ajax({
    type: "GET",
    url: "123",
    async: false // NEW
    data: { .... },
    success: function(data){
        value = data; 
    }
});

---

then和when使用替代方法：

function getValue(key, callback) {
   switch(_options.myType){

     ...

     case "db":
       return $.ajax({ // note the 'return'
           type: "GET",
           url: "123",
           ...
       });
   }
}

以及在何處調用它的方式如下：

$.when(getValue()).then(function() {
   // do the rest here ...
});

Answer 3

正確的做法是重組程序流，以便可以將邏輯放入success處理程序中。

您可以使用async選項使Ajax請求同步，但這很愚蠢。 這會降低應用程序的速度，因為瀏覽器窗口會凍結，直到請求成功返回（或超時）為止。 有充分的理由，它不經常在JavaScript開發中使用。