如何通過異步xmlhttprequest響應設置變量

Question

我想要實現的操作可以輕鬆完成，如果我進行同步請求，但由於它已被棄用，我現在正在更新我的腳本以正確使用異步調用，以便當其他方法停止工作腳本繼續工作。

，我現在用的是當前的代碼如下：

function GET(a) { 
    var request = new XMLHttpRequest(), 
    data; 
    request.open("GET", a, false); 
    request.onreadystatechange = function() { 
    if(4 == request.readyState) data = request.responseText; 
    }; 
    request.send(); 
    return data; 
} 

function getObject(a) { 
    var constructor = {}; 
    constructor.property1 = 'something1'; 
    constructor.property2 = 'something2'; 
    constructor.property3 = 'something3'; 
    constructor.property4 = true; 
    if(a && a.attribute === null) constructor.property5 = GET('/url-location'); 
    return constructor; 
} 

var object = getObject(a); 
if(object.property5) doSomethingWith(object); 

正如你所看到的請求在運行時，以設定值來構造對象進行的。它的工作原理是因爲它是synchronus，並且在繼續前函數等待響應，允許在返回對象之前設置一個值。

但是，當請求運行異步時不會發生同樣的情況，因爲該函數在不等待響應的情況下繼續運行。

我的問題很明顯;是否有可能用異步請求複製相同的行爲？如果不是的話，我怎麼能達到同樣的結構，而不會修改太多？通過這個，我的意思是創建構造函數對象需要按照我提出的方式創建;一旦getObject被調用就依次設置多個屬性，並在完成時返回它。

我不能使用庫，所以沒有jQuery，Node等我也避免了定時/循環函數。

我幾乎忘了一個更多的細節：GET函數被另一個具有不同結構的函數使用，但是具有相似的目標，所以這並不像改變GET函數那樣簡單，只需使用示例I提供。

Answer 1

傳遞一個回調函數到您的GET，並將其命名爲：

function GET(a, callback) {          // <== Change here 
    var request = new XMLHttpRequest();       // <== No need for `data` 
    request.open("GET", a, true); 
    request.onreadystatechange = function() { 
    if(4 == request.readyState) callback(request.responseText); // <== Change here 
    }; 
    request.send(); 
} 

使用（也有回調，我沒叫出來的變化，他們就像上面）：

function getObject(a, callback) { 
    var constructor = {}; 
    constructor.property1 = 'something1'; 
    constructor.property2 = 'something2'; 
    constructor.property3 = 'something3'; 
    constructor.property4 = true; 
    if(a && a.attribute === null) GET('/url-location', function(data) { 
    constructor.property5 = data; 
    callback(constructor); 
    }); 
} 

用法：

getObject(a, doSomethingWith); 

或者，如果你真的很需要那object變量：

var object; 
getObject(a, function(data) { 
    object = data; 
    doSomethingWith(object); 
}); 

...但是請注意，object將undefined直到回調發生（例如，直到XHR調用完成）。

另一種方式是與promises，但它仍然涉及回調，只是一種不同的（並可以說是更強大/方便）的鏈接風格。