AJAX嵌套获取数据的IDEA

需求

假设有一个医院病人列表，每个病人有一个体检数据列表，每个体检数据表中都有相应的体检数据。现在需要我们在病人列表中显示体检列表里第一条的体检数据中的警报级别。
这么说有点乱， AList -> BList -> CTable->获取CTable中的warnData->显示到AList的每一个数据中。

分析

遇到了这个问题我第一时间感觉像是后端来处理的，但是没办法后端不处理我只好自己来一步步进去拿咯。这里遇到的问题是：由于AJAX是异步的，使用for循环来搞经常会拿不到数据或者出错。所以我用了以下代码。

代码逻辑

MonitorEstimateList = []
index = 0
PatientListData = null
function loadInt() {
    //获取所有病人信息
    $.ajax("api", {
        type: 'get',
        contentType: 'application/json',
        dataType: "json",
        success: function (result, status, xhr) {
            var json = eval('(' + result + ')');
            PatientListData = json;
            loadEatimateList();
        }, error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(XMLHttpRequest.status);
            alert(XMLHttpRequest.readyState);
            alert(textStatus);
        },
    })
}
function loadEatimateList() {
    var message = eval('(' + PatientListData.Message + ')');

    $.ajax(kfsys.baseUrl + "api?HospitalizedHisID=" + message[index].HospitalizedHisID, {
        type: 'get',
        contentType: 'application/json',
        dataType: "json",
        success: function (result, status, xhr) {
            var resultObj = eval('(' + result + ')');       //从webApi获取json字符串转换成JSON对象
            if (resultObj.length > 0) {
                if (resultObj[0].AdmissionID != null) {
                    var url = kfsys.baseUrl + "api";
                    $.ajax(url, {
                        type: "get",
                        data: {AdmissionID: resultObj[0].AdmissionID},
                        contentType: 'application/json',
                        dataType: "json",
                        success: function (result, status, xhr) {
                            var json = eval('(' + result + ')');       //从webApi获取json字符串转换成JSON对象
                            MonitorEstimateList.push(json.warnData);
                            index++;
                            if (index + 1 > message.length) {
                                //TODO 输出结果
                            } else {
                                loadEatimateList();
                            }
                        }, error: function (XMLHttpRequest, textStatus, errorThrown) {
                            MonitorEstimateList.push(0)
                            index++;
                            if (index + 1 > message.length) {
                                //TODO 输出结果
                            } else {
                                loadEatimateList();
                            }
                        }
                    })
                } else {
                    MonitorEstimateList.push(0);
                    index++;
                    if (index + 1 > message.length) {
                        //TODO 输出结果
                    } else {
                        loadEatimateList();
                    }
                }
            } else {
                MonitorEstimateList.push(0);
                index++;
                if (index + 1 > message.length) {
                    //TODO 输出结果
                } else {
                    loadEatimateList();
                }
            }
        }, error: function (XMLHttpRequest, textStatus, errorThrown) {
            MonitorEstimateList.push(0);
            index++;
        }
    })
}

实现步骤

1. 创建index进行计数；PatientListData用于存储第一层对象数据；MonitorEstimateList用于存储每个病人的警报级别数据。
2. AJAX查询到病人信息数组，查询成功后将对象数据存储到PatientListData中，并进行下一层的查询。
3. 通过PatientListData数组中每条数据的住院号来AJAX查询当前病人的体检列表。根据不同的情况添加数据到MonitorEstimateList中，并使index加一。最后判断index索引是否超过了PatientListData，没有超过则重新启用loadEatimateList方法。
4. 如果体检表查询成功，并且有数据。那么获取第一条体检列表数据的查询ID，通过查询ID查询到体检列表详情，最后将警报级别数据存入到MonitorEstimateList中。
5. 一直循环执行loadEatimateList方法直到index + 1大于MonitorEstimateList的长度。这样就获取到了所有病人的警报级别数据。
6. 最后再部署到HTML的时候直接用MonitorEstimateList的数据就可以了。

总结

虽然这个方法是可行的，但是我总是觉得并不是一个最佳解决方案。