Promise allSettled 不等待承诺解决

Question

I have a function that posts various updates to the server using ajax. I need to let the user know once all of the updates have been sent to the server.

I have an array of promises then use promise.allSettled then but it seems to continue even though many of the promises are still pending.

  $('#updateModal').modal('show');
  console.log('Sending Updates To Server');
  let DBOpenRequest = window.indexedDB.open('pending-updates');
  var promises=[];
  var recordsToDelete=[];
  DBOpenRequest.onsuccess = function(event)
  {
    var db = event.target.result;
    // db transaction
     var itemUpdatePromises = [];
     itemUpdatesTransaction = db.transaction('item-updates', 'readwrite'),
     // get object store
     itemUpdates = itemUpdatesTransaction.objectStore('item-updates'),
     // get all records in object store
     itemUpdatesRecords = itemUpdates.getAll();
     itemUpdatesRecords.onsuccess = () =>
     {
       if (typeof itemUpdatesRecords.result!=='undefined')
       {
         if (itemUpdatesRecords.result.length>0)
         {
           recordsToDelete['itemUpdates']=itemUpdatesRecords.result;
           console.log('Sending '+itemUpdatesRecords.result.length+' Item Updates To Server');
            addElement('logWindow', '<p>Sending '+itemUpdatesRecords.result.length+' Item Updates To Server  <i id="itemUpdateIcon" class="fa-duotone fa-paper-plane"></i></p>')
           $.each(itemUpdatesRecords.result, function( index, value )
           {
             var promise = postItemUpdates(value);
             promises.push(promise);
           });
         }
       }
     };
     itemUpdatesRecords.onerror = () =>
     {
      //db.close;
      console.log('Item Updates Object Store Not Found', itemUpdatesRecords.error);
     };

The code above is building the promises array. But looking at the console output in the screenshot im getting the "all updates sent" log message before even "sending 2 item updates to server".

await delay(500); // this allowed the time for the promises array to populate before continuing - not an ideal solution but solved my issue.
console.log("before", promises.join(","))
Promise.allSettled(promises).then(function (values)
{
  console.log("after", values.join(","));
 const rejected = values.filter(result => result.status === 'rejected').map(result => result.reason);
 if ((Array.isArray(rejected) && rejected.length > 0) || typeof rejected === 'undefined')
 {
   errorMsg('There Was A Problem Sending Updates To Server');
 }
console.log('all updates sent')

The screenshot above is the console.log of the promises i am waiting to be resolved. The console.log(values) in the then function are empty and the success message fires straight away even though the promises are still pending. Does anyone know why the then function is firing before the promises are settled?

Answer 1

The output you're seeing is the first console.log statement, before the .allSettled .

Remove that first log statement, and then see what you get.

---

Some advice about debug logging

You are having trouble figuring out what your program is doing, and that trouble is made worse because you're being lazy about debug logging.

The fact is that when you're suddenly running into trouble, that's the time to become more meticulous rather than less: if you're stuck, it's probably because you misunderstood something, and the only way out of that situation is to become very careful and alert and precise while probing the situation. Put another way: if you overlooked something in haste while writing the original code, you are probably going to overlook the solution if you conduct the search with the same haste.

This is what's wrong:

• console.log(promises) on line 1
• console.log(values) on line 3

Those log statements do not contain any information other than the raw value they're dumping, which means that if they contain information you are not expecting or do not recognize, you will be unable to make sense of what you see in the logs at runtime.

Remember that console.log does not show you the name of the variable you dumped -- it only shows you the value. So, if somehow both promises and values have the same value assigned to them, then the log statements will look identical.

These log statements are not clear enough to guarantee that you interpret them correctly at runtime, and that is completely your fault.

I call this "lazy" because the solution to this problem is not hard to conceive of. You should just do this:

• console.log('promises', promises) on line 1
• console.log('values', values) on line 3

The only reason most devs don't do that every time is because it requires more effort, and we all avoid extra effort.

So let's talk about effort.

Which of these two options takes more effort:

• Option A: writing minimal debug statements that are not helpful enough to lead you to the answer, so you retry the experiment with more unhelpful log statements a few times hoping it will eventually become clear, and when it doesn't, going to StackOverflow to post a question with sample code and then waiting for other people to diagnose the problem
• Option B: writing slightly longer debug statements that print both the value of the variable and its name , so that your log statements are so unambiguous that they probably reveal the core problem on the first test run

This is not a trick question. Option A takes more effort. It always takes more effort. The reason most developers choose Option A is that the first step of Option A is slightly less effort that the first step of Option B; nevermind that Option B has only one step . (Gradient descent affects biological intelligence, too!)

---

The reason I mentioned earlier that this problem is "your fault" is not to make you feel bad, but because it's important to recognize that this means things will only get better if you change your methods . The bad experience you're having is not the result of faulty technology or shoddy tools. You have amazing tech and tools at your disposal. You're getting bad results because you're not using them well. Start using them well, and you will start getting better results.

I did my logging just like your code sample for nearly 20 years, and although I was never so hopelessly stuck that I posted about it online, the truth is that, just like you, I often found the log results perplexing.

Then one day I started doing all my debug logging like this:

console.log(`someVar`, JSON.stringify(someVar))

Note:

• prints the variable name first
• stringifies the value

It's hard to overstate the impact this one tiny change had on my day-to-day experience. From that point forward, debug logging has become an extremely reliable tool. I don't always have to resort to debug logging to figure out a problem, but now I can almost always count on it to find the problem in a single test run .

Of course, I am also a very lazy person, and so eventually I got tired of writing all that out. I still did it every time because it was so important, but it bothered me.

It turns out that many IDEs have sophisticated code-completion features. So, unless you're doing all your coding with Notepad, you can probably do what I did and set up a snippet. Here's mine, in VS Code. It triggers when I type dump and then hit Tab: