javascript - 返回 Json.Stringify 结果

Question

我有这段代码:

$.getJSON('http://myjsonurl', function(json){console.log(JSON.stringify(json.columns)); });

这会在控制台中返回我需要的所有 json 响应。我的目标是将这个值放入一个函数中，以便我可以在另一个地方调用它。 (例如:

"columns" : getColumns();

所以我正在做一个这样的函数:

function getColumns() {
    $.getJSON('http://myjsonurl', function(json){return JSON.stringify(json.columns); });
    }

console.log(getColumns()); // and then call the function in the console log expecting to see the same result as before.

但我得到的只是未定义的。 为什么？

更新:

这就是我实现目标的方式。以下代码将根据带有数据和列的 json 响应重新启动数据表(数据表本身不支持的内容)。该代码将使用新的查询参数重新加载表并包含按钮插件:

var theurl;
theurl = "http://myjson.json";


function updateQueryStringParameternondt(key, value) {
    var table = $('#datatable-buttons').DataTable();
    var ajaxurl = theurl;   
  var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
  var separator = ajaxurl.indexOf('?') !== -1 ? "&" : "?";
  if (ajaxurl.match(re)) {
    console.log( ajaxurl.replace(re, '$1' + key + "=" + value + '$2'));
    theurl = ajaxurl.replace(re, '$1' + key + "=" + value + '$2');
    table.destroy();
    TableManageButtons.init();

  }
  else {
       console.log( ajaxurl + separator + key + "=" + value);
    theurl =  ajaxurl + separator + key + "=" + value ;
    table.destroy();
    TableManageButtons.init();
  }
}

TableManageButtons.init();

var handleDataTableButtons = function() {


        0 !== $("#datatable-buttons").length && 

    $.ajax( {
  url:theurl,
  dataType: 'json',
  success: function ( json ) {

      $("#datatable-buttons").DataTable({
        "data" : json.data,
        "columns": json.columns,    
            dom: "Bfrtip",
            buttons: [{
                extend: "copy",
                className: "btn-sm"
            }, {
                extend: "csv",
                className: "btn-sm"
            }, {
                extend: "excel",
                className: "btn-sm"
            }, {
                extend: "pdf",
                className: "btn-sm"
            }, {
                extend: "print",
                className: "btn-sm"
            }],
            responsive: !0
        });
         }
} );
    },
    TableManageButtons = function() {
        "use strict";
        return {
            init: function() {
                handleDataTableButtons();
            }
        };
    }();

Answer 1

@guest271314 的回答是正确的，应该会指导您解决有关从 getColumns 方法返回 undefined 的问题。

我只想在这里指出一些关键的事情。

首先调查plunk我刚才创建了。正如您所看到的，这里所有的果汁都是操纵 Deferred 对象(有关更多信息，请参见 here)。粗略地解释一下，Deferred 对象可以注册回调，如果您喜欢多个回调，将它们链接起来，通过调用它们可以广播它们的状态和响应。它基于 promise 设计，因此此类方法返回一个可以解析的同步或异步 promise (大多数情况下 promise 在异步操作中很有用)。

jQuery 的异步方法，如 $.ajax 返回一个 promise 。 $.getJSON 也不异常(exception)，因为它最终调用了 $.ajax，如前所述，它返回一个 jQuery Deferred Promise。

对于 jQuery 的 animation 方法，请参阅下面的 @guest271314 评论。

更多关于 promise here .

来自文档:

Return a Promise object to observe when all actions of a certain type bound to the collection, queued or not, have finished.

一个 promise，当被处理时要么被resolved 要么被rejected。 resolve 代表成功响应，reject 代表失败。 从文档中我们可以看到 Deferred 对象有处理成功、失败或两者的方法。

deferred.done() Add handlers to be called when the Deferred object is resolved.

deferred.fail() Add handlers to be called when the Deferred object is rejected.

deferred.always() Add handlers to be called when the Deferred object is either resolved or rejected.

那么，让我们回到 OP 的问题。正如您现在可以从代码中看到的那样:

function getColumns() {
    $.getJSON('http://myjsonurl', function(json){return JSON.stringify(json.columns); });
}

您无法知道 getColumns 状态，因为您没有返回 promise。当使用 $.getJSON 处理程序时，您实际上是在处理响应而不发出 promise 对象。 getColumns 函数当然会返回 undefined，因为没有 return 的标志，默认情况下你会得到它。

关于 deferred.then() 方法，您也可以使用它来处理 promise ，处理它的状态和进度。在上面发布的 Plunker 中的示例代码中，我不关心进度，只关心状态，因此在第一个示例中，promise 是使用 .then() 方法处理的，第一个函数作为成功处理程序，第二个函数作为失败处理程序。从他们那里返回响应本质上意味着 promise 得到解决。我也返回 promise 本身。

在注释掉的部分，你可以看到如果你愿意，你可以只返回 promise ，并在 always 方法中解析响应