javascript - 多个 ajax 获取数据轨的替代方案

Question

我的页面上有 4 个选项卡:

我的队列|今天 |后续|即将推出

在页面加载时，我触发 4 个 ajax 调用，以从 Controller 获取所有这些选项卡的数据，一旦获取数据，我就会为每个选项卡创建列表。

但是由于 ajax 是异步的，我的数据出现异常，有没有更好的方法来实现这一点。

我有 4 个类似于以下调用的 ajax 调用:

$.ajax({
                    url: '/opd_clinical_workflow/get_appointment_lists',
                    dataType: 'json',
                    data: {
                        current_date: current_date,
                        department_id: current_department,
                        doctor: current_doctor,
                        status: current_status,
                        source: "list",
                        q: $( "#search_appointment").val(),
                    },
                    success: function(res){
                        console.log(tab,res)
                        _this.updateMyQueueSummary(res,id,tab);
                    },
                    error: function(err){
                        console.log(err);
                    }
               });

更新我的队列摘要: 将数据放入相应的选项卡

创建摘要约会: 为我创建 html 并在 updatesummary 中调用

Answer 1

链接 AJAX 是您的最佳选择:

$.ajax({
    url: "somewhere/1"
  })
  .always(function(reponse1) {
    //Do something with the response
    document.write("<p>1</p>");
    //Then call next part
    $.ajax({
        url: "somewhere/2"
      })
      .always(function(reponse2) {
        //Do something with the response
        document.write("<p>2</p>");
        //Then call next part
        $.ajax({
            url: "somewhere/3"
          })
          .always(function(reponse3) {
            //Do something with the response
            document.write("<p>3</p>");
            //Then call next part
            $.ajax({
                url: "somewhere/4"
              })
              .always(function(reponse4) {
                //Do something with the response
                document.write("<p>4</p>");
                //Now finalize it

                document.write("<p>Final</p>");
              })
          })
      })
  })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

请注意，我使用always而不是done，因为我没有任何地方可以实际获取数据。