JavaScript 嵌套 AJAX 调用并承诺如何正确链接？

Question

我坚持为以下设置正确的执行顺序。假设，我需要进行 AJAX 调用，然后处理数据并将其存储在 IndexedDB 中。我使用 idb-keyval lib 来实现这一点，它基于 Promise 进行操作。然后，根据数据内容，我需要进行另一个 AJAX 调用来获取一些依赖数据并将其存储在 IndexedDB 中。然后，我必须触发文档的最终数据处理。为此，我尝试使用 ajaxStop 事件，该事件会在所有 AJAX 调用完成时触发。然而，处理的顺序并不符合预期。当主 AJAX 调用完成而不等待子调用完成时，将触发 ajaxStop 事件。然后，当子调用完成时，它会再次触发。

这是我的代码：

import { set } from 'https://cdn.jsdelivr.net/npm/idb-keyval@6/+esm';

$(document).on("ajaxStop", function() {
    console.log("All Done!");
});

$(document).ready(function () {
    $.ajax({
      url: '/echo/json/',
      async: true,
      beforeSend: function(){
        console.log("Sending main request!");
      },
      success: function () {
        set('test', 'test').then(() => {
            $.ajax({
              url: '/echo/json/',
              async: true,
              beforeSend: function(){
                console.log("Sending sub-request!");
              },
              success: function() {
                set('sub-test', 'sub-test');
                console.log("Sub-request done!");
              }
          });
        });
      }
    });
});

我在控制台中看到的内容如下：

我错过了什么让 ajaxStop 等待所有调用完成？或者，如何让主 AJAX 调用等待成功函数处理所有数据然后才报告完成？

Answer 1

您的代码应更改为大约以下内容：

$(document).ready(function () {
    $.ajax({
      url: '/echo/json/',
      beforeSend: function(){
        console.log("Sending main request!");
      },
    }).then(() => {
      return set('test', 'test');
    }).then(() => {
      return $.ajax({
        url: '/echo/json/',
        beforeSend: function(){
          console.log("Sending sub-request!");
        },
      });
    }).then(() => {
      return set('sub-test', 'sub-test');
    }).then(() => {
      console.log("Sub-request done!");
    }).catch(console.error);
});

有几点需要注意：

1. 您不需要在 $.ajax 请求中将 async 设置为 true，这是默认值
2. 确保您返回

   .then

   处理程序的承诺，以便在链上获得正确的时间
3. 不要忘记附加一个 catch 处理程序，即使它只是

   console.error

   ，就像我在这里所做的那样。