JQuery如何等待返回直到getJSON完成？（网络接口）答案

【问题标题】：JQuery how to wait with return untill getJSON is done? (Web api)JQuery如何等待返回直到getJSON完成？（网络接口）
【发布时间】：2016-06-15 08:36:49
【问题描述】：

我正在制作一个包含 web api 和 JQuery 的项目。其中一个 html 页面必须显示商店和商店经理的名称。

每家商店都有：
身份证，
商店名称，
经理 ID。

每位经理都有：
身份证，
经理姓名。

商店不直接持有经理姓名。

代码如下所示：

// There is a html code with <table id='table'>...</table> before the script.
var storesUri = 'api/stores' //The stores uri
$(document).ready(function() {
    $.getJSON(storesUri)
        .done(function(data) {
            $.each(data, function(key, item) {
                $('#table).append(
                    '<tr>' +
                    '<td>' + item.ID + '</td>' +
                    '<td>' + item.storeName + '</td>' +
                    '<td>' + findManagerNameByID(item.ManagerID) + '</td>' + //get the manager name by the manager id
                    '</tr>');
            });
        });
});

var managersUri = 'api/managers' //The managers uri
function findManagerNameByID(id) {
    var res = 'N/A';
    $getJSON(managersUri + '/' + id)
        .done(function(data) {
            res = data.ManagerName; //puts in res the fit manager name
        })
        .fail(function(jqXHR, testStatus, err) {
            res = 'None';
        });
    //alert('1');
    return res;
}

在此代码之后，该表必须包含每个商店的商店 ID、商店名称和商店经理姓名。而不是该表包含每个商店的商店 ID、商店名称和“N/A”（res 的默认值）。

问题是，如果我在代码中添加“alert('1');”就在退货之前（您可以在命令中看到它），该表将没问题，它将为每个商店包括我想要的商店 ID、商店名称和商店经理。

我认为这是因为'return res;'行以某种方式发生在 'res=data.ManagerName;' 之前行（我认为这是因为当代码在返回之前有一点警报延迟时，一切都很好）。如何在没有警报的情况下正确填写表格？谢谢。

【问题讨论】：

一种更有效的方法是将 API 中的 SELECT 更改为 SELECT S.ID, S.StoreName, M.ManagerName FROM Stores S, Managers M WHERE S.ManagerID = M.ID 之类的东西

标签： javascript jquery ajax asp.net-web-api

【解决方案1】：

这里的问题是请求（getJSON）是异步运行的，所以代码发起请求并为每个结果注册回调处理程序，然后返回res的当前值（即'N/ A')。

您可以强制它同步运行，但可能不使用该便利功能。我不记得它的确切语法，但 jQuery 文档非常好。如果getJSON 没有“同步”模式，那么您可以随时返回ajax 函数，该函数由getJSON 在内部使用。

【讨论】：

【解决方案2】：

getJSON 函数是异步的，所以我建议你改变你的函数：

function findManagerNameByID(id){

到：

function findManagerNameByID(id, callback){

因此，当 getJSON 返回一个值（完成）时，您可以在回调函数中使用它，例如：

var managersUri='api/managers' //The managers uri
function findManagerNameByID(id, callback){
  var res = 'N/A';
  $getJSON(managersUri+'/'+id)
  .done(function(data){
    // use the callback
    res=data.ManagerName;    //puts in res the fit manager name
    callback(res);
  })
  .fail(function(jqXHR, testStatus, err){
    res='None';
  });
}


// when you call your function pass the callback....
findManagerNameByID('thisId', function(res) {
  // use your res value right now
})

【讨论】：

【解决方案3】：

您可以直接从完成或失败返回，而不是将返回值放在 var 中。我认为“无”将与“不适用”相同，从而消除了对 var 的需要。所以这部分代码看起来像

$getJSON(managersUri+'/'+id)
            .done(function(data){
                return data.ManagerName;    //puts in res the fit manager name
            })
            .fail(function(jqXHR, testStatus, err){
                return 'None';
            });

【讨论】：