Первый AJAX всегда происходит раньше, чем последний вложенный AJAX

Question

Я использую вложенный AJAX.Я отключаю кнопку перед всеми вызовами AJAX, затем включаю кнопку в .always во внешнем AJAX.Но проблема в том, что я думаю, что код для кнопки включения происходит раньше, чем код внутри .done самого внутреннего AJAX.Это потому, что .alally во внешнем AJAX работает параллельно с .done во внутреннем AJAX?И один делается раньше другого?

Какой обходной путь к этому?Нужно ли использовать обещания, чтобы включение кнопки происходило после завершения всех вызовов AJAX?Если да, можете ли вы показать мне, как?Это кажется продвинутым, и я не понимаю код, который я читал вокруг.

    function loginAndEnter() {
        $("#login-and-enter-btn").prop('disabled', true);
        $("#login-and-enter-btn").text('請稍等...');

        $.ajax({    //Outermost AJAX
            type:"GET",
            url:"/qrcode/login/",
            data:{
                "cellphone":document.getElementById("cellphone").value,
                "password":document.getElementById("password").value
            }
        })
        .done(function(responsedata) {
            var parsedJson = $.parseJSON(responsedata);

            if(parsedJson.result==1){
                document.getElementById("token").value = parsedJson.token;

                $.ajax({
                    type:"GET",
                    url:"/qrcode/entry/",
                    data:{
                        "token":document.getElementById("token").value,
                        "parking_lot_id":{{ $parking_lot_id }},
                        "in_or_out":{{ $in_or_out }}
                    }
                })
                .done(function(responsedata) {
                    var parsedJson = $.parseJSON(responsedata);

                    if(parsedJson.result==1){
                        $.ajax({
                            type:"GET",
                            url:"/qrcode/zero/",
                            data:{
                                "booking_id":parsedJson.Booking_ID[0].id,
                                "token":document.getElementById("token").value
                            }
                        })
                        .done(function(responsedata) {    //Innermost done
                            var parsedJson = $.parseJSON(responsedata);

                            if(parsedJson.result==1){
                                alert("進場成功! 請使用易停網APP繳費與出場.");
                                window.location.href = "/download";
                            }
                            else{
                                alert(parsedJson.title+"\n"+parsedJson.description);
                            }
                        })
                        .fail(function(xhr, status, errorThrown) {
                            ...
                        });
                    }
                    else{
                        alert(parsedJson.title+"\n"+parsedJson.description);
                    }
                })
                .fail(function(xhr, status, errorThrown) {
                    ...
                });
            }
            else{
                alert(parsedJson.title+"\n"+parsedJson.description);
            }
        })
        .fail(function(xhr, status, errorThrown) {
            ...
        })
        .always(function() {    //Outermost always
            $("#login-and-enter-btn").prop('disabled', false);
            $("#login-and-enter-btn").text('登入和升起柵欄進場');
        });
    }

Answer 1

Функция .always не ожидает завершения других AJAX-запросов, потому что она вызывается сразу после того, как самый внешний запрос получает ответ. Тот факт, что запросы вложены, означает, что последующие AJAX-запросы будут вызываться после того, как будут разрешены другие, но если вы хотите сделать что-то только тогда, когда и после того, как все они будут разрешены, Promises потребуется.

Я изменил ваш код, чтобы показать один из способов достижения вашей цели с помощью Promises и функции async / await.

function firstAJAX() {
  return new Promise((resolve, reject) => {
    $.ajax({    //Outermost AJAX
      type:"GET",
      url:"/qrcode/login/",
      data:{
          "cellphone": 111111111111,
          "password": "pwd"
      }
    })
    .done(function(responsedata) {
      // var parsedJson = $.parseJSON(responsedata);
      var parsedJson = {};
      parsedJson.result = 1;

      if(parsedJson.result==1){
        resolve(responsedata);
      }
      else{
        alert(parsedJson.title+"\n"+parsedJson.description);
      }
    })
    .fail(function(xhr, status, errorThrown) {
      console.log(status);
    });

  });
}

function secondAJAX(data) {
  return new Promise((resolve, reject) => {
    $.ajax({
        type:"GET",
        url:"/qrcode/entry/",
        data:{
            "token": "token",
            "parking_lot_id": 11,
            "in_or_out": 22
        }
    })
    .done(function(responsedata) {

      // var parsedJson = $.parseJSON(responsedata);
      var parsedJson = {};
      parsedJson.result = 1;

      if(parsedJson.result==1){
        resolve(responsedata);
      }
      else{
        alert(parsedJson.title+"\n"+parsedJson.description);
      }
    })
    .fail(function(xhr, status, errorThrown) {
      console.log(status);
    });
  });
}

function thirdAJAX(data) {
  return new Promise((resolve, reject) => {
    $.ajax({
      type:"GET",
      url:"/qrcode/zero/",
      data:{
          "booking_id": 222,
          "token":"token"
      }
    })
    .done(function(responsedata) {    //Innermost done
      // var parsedJson = $.parseJSON(responsedata);
      var parsedJson = {};
      parsedJson.result = 1;

      if(parsedJson.result==1){
          alert("進場成功! 請使用易停網APP繳費與出場.");
          // window.location.href = "/download";
          resolve(responsedata);
      }
      else{
          alert(parsedJson.title+"\n"+parsedJson.description);
      }
    })
    .fail(function(xhr, status, errorThrown) {
        console.log(status);
    });
  });
}

async function loginAndEnter() {
  const first = await firstAJAX();
  const second = await secondAJAX(first);
  const third = await thirdAJAX(second);
  $("#login-and-enter-btn").prop('disabled', false);
  $("#login-and-enter-btn").text('登入和升起柵欄進場');
}

Таким образом, все работает так, что функция loginAndEnter будет ожидать разрешения firstAJAX, secondAJAX и thirdAJAX. Все эти функции возвращают Promises, которые разрешаются, когда GET-запрос успешно получает ответ. secondAJAX и thirdAJAX принимают один параметр, который является ответом, передаваемым асинхронно (благодаря 'await') из функции, вызываемой перед ним.

Я изменил многие значения для своих собственных целей тестирования, поэтому, пожалуйста, измените их на свои, прежде чем испытывать их.