Question

我有一个包含3个对象的数组。我正在执行ajax请求以获取新数组来替换旧数组。

console.log('before');
console.log(strucData);

jQuery.ajax({
    url: treeDataUrl,
    dataType: "json",
    data: {
        objectId: oid,
        structureMenu: menu,
        reinit:"reinit"
    }, success : function (strucDataSon) {
        strucData = JSON.parse(strucDataSon.structureTree);

        console.log('inside success');
        console.log(strucData);
    } 
});
//strucData =  JSON.parse(strucDataSon);

console.log('after success');
console.log(strucData);

日志在成功之前给出订单 - ＆gt;成功后 - >使用相应的数组成功。

所以最终成功后的strucData是我的旧数组，新的strucData丢失了。我错过了什么或者有没有办法用新的阵列替换我的旧阵列？

Answer 1

您可以重新定义数组，但在请求响应后，“成功后”日志并不是真的。

这就是回调的工作原理。他们是异步的！你可以专门使它们同步，但这是“阻塞”的另一个词，这意味着你的其余代码将等到它执行。

ajax请求被发送到服务器。当响应到达时，它会将其提供给“成功”回调（如果成功）。您可能不会丢失数据，但在此之前无法访问它。

因此，您将使用数据，然后在回调中处理它或将其传递给另一个方法。

以这种方式思考，你也可以把

console.log('after success');
console.log(strucData);

在定义ajax请求之前。它会产生同样的效果。

要记住的另一件事是JavaScript是单线程 运行时，这意味着在任何给定时间只能运行一条指令。虽然这看起来似乎是一个限制因素，但它作为一种方法实际上相当强大。这意味着您可以明确控制操作顺序，而不会遇到竞争条件。

Answer 2

由于ajax调用是异步的，因此数组不会以这种方式更新，但是如果你把这个语法放在$ .when（）。then（）中，那么“then”中的任何代码都将在ajax调用之后运行。完成。我希望这种解决方法有所帮助。以下是文档：when-then

问题是即使调用尚未替换您的数组，您的剩余代码仍会继续运行，因此即使在进行调用时，ajax调用之外的代码也会先完成。我的意思是ajax的异步性质。

Answer 3

对于此工作流程，您需要执行同步ajax

                    console.log('before');
                    console.log(strucData);


                    jQuery.ajax({
                          url: treeDataUrl,
                          dataType: "json",
                          async: false,
                          data: {
                              objectId: oid,
                              structureMenu: menu,
                              reinit:"reinit"
                          },
                          success : function (strucDataSon) {
                              strucData = JSON.parse(strucDataSon.structureTree);

                    console.log('inside success');
                    console.log(strucData);



                          } 
                      });

                    //strucData =  JSON.parse(strucDataSon);

                    console.log('after success');
                    console.log(strucData);

<强>更新

由于同步调用将被弃用，因为@ Jaromanda-X指出，这是另一种使用promises的解决方案：

    console.log('before');
    console.log(strucData);

    doAjax(treeDataUrl, menu)
    .then(function (strucData2) {
          strucData = strucData2;
          console.log('after success');
          console.log(strucData);
    })
    .fail(function (e) {
       //DO SOMETHING IF AJAX FAILS
    });


    doAjax: function (treeDataUrl, menu) {
       var deferredValue = $.Deferred();
       jQuery.ajax({
          url: treeDataUrl,
          dataType: "json",
          data: {
             objectId: oid,
             structureMenu: menu,
             reinit:"reinit"
          },
          success : function (strucDataSon) {
             var strucData2 = JSON.parse(strucDataSon.structureTree);
             console.log('inside success');
             console.log(strucData2);
             deferredValue.resolve(strucData2);
          }
      })
    return deferredValue.promise(); 
    }

Answer 4

你的console.log("after success")是个谎言。 :)如果您需要对从AJAX调用返回的数据执行某些操作，请执行成功回调。

（当然，如果使代码更整洁，你可以从那里调用其他函数。）

如何在ajax请求后用新数组替换旧数组？

4 个答案: