使兩個ajax請求異步運行

我想讓兩個ajax請求一個接一個地異步運行。第一個請求拉取用戶代碼的值，該用戶代碼將顯示在div中，然後在下一個Ajax請求中發送以拉取有關用戶的某些詳細信息。我想是這樣的：在所有都具有相同的效果或不添加「異步」：使兩個ajax請求異步運行

var uid = ""; 
var token = ""; 

$.ajax({ 
    async: true, 
    type: "POST", 
    url: "http://www.example.com/apis/login.php", 
    data: JSON.stringify(inputs), 
    dataType: "json", 
    success: function(data) { 
     if(data.status == "success") { 
      uid = data.uid; 
      token = decodeURIComponent(data.token); 
     } 
     else{ 
      alert(data.message); 
     } 
    }, 
    error: function() { 
     alert("could not connect to server"); 
    } 
}); 

document.getElementById("user-id").innerHTML = uid; 

$.ajax({ 
    async: true, 
    type: "GET", 
    url: "http://www.example.com/apis/services.php", 
    headers: { 
     "Auth-Token" : encodeURIComponent(token), 
     "U-Id" : uid 
    }, 
    success: function(data) { 
     alert("connected to server"); 
    }, 
    error: function() { 
     alert("could not connect to server"); 
    } 
});

但如預期，這並不工作，加入「真異步」。網絡控制檯顯示第二個Ajax請求是在獲取第一個請求的響應之前完成的，因此第二個請求由於標頭無效而失敗，用戶標識的文本框更新也是如此。

我可以通過在第一個請求的成功函數內的第一個ajax調用之後添加所有後續代碼來工作，但這非常不方便，因爲在此之後會調用一些更多apis，這將導致我不願意使用的嵌套調用。

有什麼辦法讓這段代碼異步運行？請告訴我。

在此先感謝。

來源

2017-06-15 Debopam Parua

AJAX的全稱是「異步JavaScript和XML 「，'aysnc：true'是默認的，你可以像你說的那樣嵌套回調，或者你可以鏈接[Promises]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/ Global_Objects/Promise） –

你完全誤解了「異步」這個詞。您需要使用回調或承諾。 – SLaks

當您需要第一個電話的令牌進行第二個呼叫時，這怎麼可能是異步？ –

所有你需要做的就是設置函數，這個函數會在第一個Ajax請求成功時被調用。

var uid = ""; 
var token = ""; 

$.ajax({ 
    type: "POST", 
    url: "http://www.example.com/apis/login.php", 
    data: JSON.stringify(inputs), 
    dataType: "json", 
    success: function(data) { 
     if(data.status == "success") { 
      uid = data.uid; 
      token = decodeURIComponent(data.token); 
      successCallback(); 
     } 
     else{ 
      alert(data.message); 
     } 
    }, 
    error: function() { 
     alert("could not connect to server"); 
    } 
}); 


function successCallback() 
{ 
    document.getElementById("user-id").innerHTML = uid; 
    $.ajax({ 
     type: "GET", 
     url: "http://www.example.com/apis/services.php", 
     headers: { 
      "Auth-Token" : encodeURIComponent(token), 
      "U-Id" : uid 
     }, 
     success: function(data) { 
      alert("connected to server"); 
     }, 
     error: function() { 
      alert("could not connect to server"); 
     } 
    }); 
}

來源

2017-06-15 14:44:51

一種簡單的方法，沒有承諾，是第一個完成後，啓動第二個電話，並從第一個呼叫傳遞令牌：

$.ajax({ 
    url: "http://www.example.com/apis/login.php", 
    //... 
    success: function (data) { 
     uid = data.uid; 
     document.getElementById("user-id").innerHTML = uid; 
     makeSecondCall(data.token); 
    } 
}); 


function makeSecondCall(token) { 
    $.ajax({ 
     //... 
     headers: { 
      "Auth-Token": token, 
      "U-Id": uid 
     } 
    }); 
}

來源

2017-06-15 14:48:49

使兩個ajax請求異步運行

回答

相關問題