阿贾克斯回调.不理解 ajax 回调

Ajax callback. Do not understand the ajax callback

本文关键字：回调 ajax 不理解 阿贾克斯      更新时间：2023-09-26

我正在从文件中获取数据，在这种情况下它是/notes.html .我正在尝试将 ajax 调用的结果存储在变量中，但它一直返回未定义，但是当我在 chrome 开发人员工具中运行该函数时，它会返回 /notes.html 的内容。这是我修改的用于记录数据的简单代码：

    var ajax = {};
    ajax.result = Array();
    ajax.fetch = function(urls,datas){
        $.ajax({
            url: urls,
            type: 'post',
            data: datas,
            success: function(data){
                console.log (data);
            }
        });
    }
    ajax.fetch('/notes.html',{});

现在这就是我要说的。如果我们更改console.log并将其变成 return ，然后console.log ajax.fetch调用，我们将得到未定义。

当我将其保存在ajax.result中，然后在chrome dev.工具中调用它时，内容显示在chrome dev.工具中，但我无法在基本javascript中使用它。

页面在这里。这是一个空白页，但您可以在控制台中看到它使用上面的代码打印的内容。

ajax 本质上是一个延迟调用，所以你从函数返回什么真的无关紧要，原始 fetch 已经退出并返回未定义不久前......

您可以将回调传递给 fetch 来解决此问题：

var ajax = {};
var result;
    ajax.result = Array();
    ajax.fetch = function(urls,datas, callback){
        return $.ajax({
            url: urls,
            type: 'post',
            data: datas,
            success: function(data){
                callback(data);
            }
        });
    }
    ajax.fetch('/notes.html',{}, function (data) {
        // execute result related code here to ensure variable already assigned
    });

如果执行跟踪，将获得以下执行：

  1. 声明 AJAX
  2. 结果已声明
  3. AJAX设置为{}
  4. ajax.result 设置为一个新的数组（顺便说一句，你应该使用 [] 而不是 Array 以避免潜在的原型疯狂）
  5. ajax.fetch 设置为函数
  6. 调用 ajax.fetch，使用匿名函数作为回调
  7. $.ajax 被称为
  8. ajax.fetch 返回（这就是你的 undefined 的来源，现在它将返回一个 jQuery 延迟对象）
  9. 调用成功回调
  10. 传递的回调被调用
  11. 成功回调返回（无法捕获返回值，因为 fetch 已在 8 中返回）
  12. 完成回调是代码（由于闭包，您可以使用获取的数据）

对 $.ajax（） 的调用在发出请求后立即返回，因为它默认以异步模式运行。$.ajax 调用的返回值不是成功函数的返回值。开启同步行为：

ajax.fetch = function(urls, datas)
{
  result = null;
  $.ajax({ url: urls,
           type: 'post',
           data: datas,
           async: false,
           success: function(data) { result = data; } });
  return result;
}

或者只是这样做：

$.ajax({ url:   urls,
         type:  'post',
         data:  datas,
         async: false }).responseText;
相关文章：