等待函数中的Ajax调用结束,然后将对象返回到外部变量

时间:2016-11-03 13:58:28

标签: javascript json ajax asynchronous endpoints

我想按照预期使用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。我已将Karman的答案标记为已接受,因为它是最接近解决方案的人。我的最终解决方案也受到了同事的启发,如下:

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; }
);

2 个答案:

答案 0 :(得分:0)

在代码的第一行声明var DataModel1。

in success方法(updateData)直接将数据分配给DataModel1。在成功方法本身中,您可以使用url来区分datamodel2

答案 1 :(得分:0)

function fetchDataJSON(endpointUrl, callback) {
function updateData(data) {
    returnObj = data;

  callback(returnObj)
}

fetchDataJSON( "http://mydata.com/endpoint/sweetjson", getJson );

enter code here

function getJson(returnObj)
 {
    //do work with returnObj
  }