Question

我正在尝试在从URL返回的JSON对象中返回一个数据数组，我可以看到使用console.log返回的数据。

但是在尝试捕获变量中的返回数组时，例如：

var arr = list();
console.log(arr.length);

此代码输出的长度为“0”，尽管返回的数据具有内容（因此长度大于零）。我该如何使用这些数据？

list: function() {

        var grades = []; 


         $.getJSON(
         "https://api.mongolab.com/api/1/databases", function(data) {

            console.log(data);

            grades [0] = data[0].name;

            console.log(grades.length);
          });


        return grades;
},

Answer 1

如果您不熟悉异步调用的概念，那么您面临的问题很容易被抓住！永远不要害怕，你会到达那里。

发生的事情是，当您调用AJAX时，即使请求尚未完成，您的代码也会继续处理。这是因为AJAX请求可能需要很长时间（通常是几秒钟），如果浏览器必须等待，那么用户将会在冻结的屏幕上盯着它。

那么你如何使用AJAX调用的结果呢？

仔细查看getJSON documentation，您会看到一些提示。像getJSON这样的异步函数可以通过两种方式处理：Promises或Callbacks。它们的用途非常相似，因为它们只是两种不同的方式让您指定一旦完成AJAX后要做什么。

回调允许您将函数传递给getJSON。一旦AJAX完成，您的函数将被调用。您实际上已经在您编写的示例代码中使用了回调，只是您的回调是在list（）方法中定义的，所以它不是非常有用。

Promise允许您通过getJSON将函数传递给Promise 返回，这将在AJAX完成后调用。

由于你在一个方法中做了所有这些，你必须决定你将支持哪一个。您可以让您的方法接受回调（并传递它们），也可以让您的方法返回getJSON返回的承诺。我建议你两个都做！

检查出来：

var list = function(success) {
  // Pass in the callback that was passed into this function.  getJSON will call it when the data arrives.
  var promise = $.getJSON("https://api.mongolab.com/api/1/databases", success)

  // by returning the promise that getJSON provides, we allow the caller to specify the promise handlers
  return promise;
}

// Using callbacks
list(function(grades) {
  console.log(grades);
});

// Using promises
list()
  .success(function(grades) {
    console.log(grades);
  });

如何使用ajax调用返回的数据？

1 个答案: