I am stuck at setting the proper order of execution for following. Suppose, i need to make an AJAX call, then process the data and store it in IndexedDB. I use idb-keyval lib for that, which operated on promises. Then, based on the data content, i need to make another AJAX call to get some dependent data and also store it in IndexedDB. Then, i have to trigger final data processing for the document. For that I try to use ajaxStop event, which would trigger when all AJAX calls are completed. However, the order of the processing is not as expected. The ajaxStop event fires when the main AJAX call is finished without waiting for the child call to complete. Then, it fires again when sub-call is completed.

Here is my code:

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!");
              }
          });
        });
      }
    });
});

what i see in console is following:

What am I missing to make ajaxStop wait for all calls to complete? Or, how to make the main AJAX call to wait for success function to process all the data and only then report completion?