我想按照预期使用 JavaScript 异步。我想将收到的数据/对象分配给我需要的尽可能多的变量(DataModel01、DataModel02、DataModel03 等)。我的想法是,我对 API 数据的需求一直在变化,我只想定义一次从哪里获取数据(API 端点),以及将其存储在哪个本地变量/对象中。
我这样做的方式是,它返回带有从 fetchDataJSON() 函数接收到的数据的对象。但是,如何让返回等待Ajax完成呢?我已经尝试了几种方法,包括计时器和回调,但根本不起作用。
我看到了有关 ajax 和 async 的其他问题,通常建议使用回调。所以我相信我可能偏离了轨道,但我需要有人来找出一种优雅地处理这个问题的方法。我真的需要搞乱计时器和类似丑陋的解决方案吗?
function fetchDataJSON(endpointUrl) {
var returnObj = [];
// Ajax call
$.ajax({
type: "GET",
url: endpointUrl,
dataType: 'json',
async: true,
success: updateData,
error: handleError
});
function updateData(data) {
returnObj = data;
}
function handleError(XHR, message, error) {
console.log("Failed XHR");
}
return returnObj; // Return JSON object
}
var DataModel01 = fetchDataJSON( "http://mydata.com/endpoint/sweetjson" );
var DataModel02 = fetchDataJSON( "http://mydata.com/endpoint/somethingelse" );
编辑:
我现在找到了一个可行的解决方案,yihar。我已将卡门的答案标记为已接受,因为它是最接近解决方案的答案。我的最终解决方案也是受到同事的启发,如下:
var DataModel01 = [];
var DataModel02 = [];
function fetchDataJSON(endpointUrl, callbackWhenDone) {
// Ajax call
$.ajax({
type: "GET",
url: endpointUrl,
dataType: 'json',
async: true,
success: updateData,
error: handleError
});
function updateData(data) {
callbackWhenDone(data);
}
function handleError(XHR, message, error) {
console.log("Failed XHR");
}
}
fetchDataJSON(
"http://mydata.com/endpoint/sweetjson",
function(newData) { DataModel01 = newData; }
);
fetchDataJSON(
"http://mydata.com/endpoint/somethingelse",
function(newData) { DataModel02 = newData; }
);