JavaScript Promises

I have been working on a newspaper appliction where the subscriber can have multiple addresses.  In particular, a snow-bird subscription allows the subscriber to have multiple addresses and choose which address is the "active" printed edition deliver address.

When maintaining the subscriber information, the page shows all addresses and allows updates to all of the addresses.  The addresses are then USPS verified by making ajax calls back to the newspaper website. If any address does not verify I then display an error dialog and allow the subscriber to allow the unverified address (perhaps a new subdivision that the USPS is not updated yet) or to correct the error.

In order to do that, I need to synch up the return of all of the ajax calls: and of course, that's where the JavaScript Promise comes into play.  While the concept is pretty straight forward, the details of setting up the promises is a little complicated; but I worked through the process. Using the JavaScript debugger I was able to verify the promises where setup properly and eventually did fullfill the promise. 

However, the Promise.all static function was not waiting for all promises to be fullfilled. After several hours of research, I finally realized the Promise.all is ansychronous and requires an "await" to actually wait for all promises to be fullfilled. In the hours of searching the internet and looking through books did I find any mention that an "await" was needed. 

I have never posted a question on stackoverflow but I do a lot of research there. In usual fashion, stackoverflow responses were filled with complaints that someones problem wasn't stated EXACTLY the way someone thought it should be: kind of like Jeopardy where the answer must be in the form of a question. If the problem is clear but not stated right, there are more complaints about the way it was entered than the actual solution of the problem.  And, of course, lots of people give answers that are not even remotely related to the question. And, of course, a fair number of people authoratatively respond with incorrect answers.  But, even after having waded through all of the dreck, there was still no mention of the "await" being required for Promise.all to actually wait for all the promises to be fullfilled.

After finally realizing that await was needed, the process flowed properly and I was able to display an error dialog that showed ALL addresses that could not be USPS verified. 

However, when constructing the innerHTML to display in the error dialog, I could not access  the responses in the promises.  Again, using the debugger, I could see the details of the promise and I could see the response information (the actual address html) but I couldn't access it.  I tried accessing as an object property; I tried accessing it as an array element; I tried accessing it using the promise.then function. I could not access the PromiseResponse.

As a matter of fact, using the debugger, the promise.next functon was totally skipped for all of the promises (i.e. all of the addresses). I stopped the debugger after it was clear I was getting the PromiseResponse.  However, one time I accidentally let the loop run another iteration.

LOW AND BEHOLD: after the loop through the promise array was completed, I was getting the actual code called to handle getting the PromiseResponse. The promise.next process ALSO runs asynchronously (why?).  When I put an await on the promise.next everything worked the way I expected it.

All in All, I spent most of a day getting the promise process to work -- and most of it was just needing to put an await on the Promise.all and the promise.next functions.

Hopefully, someone searching the web for information on using the JavaScript Promise will find this and save themselves some time!  JavaScript Promise process is very powerful -- especially if you need to chain the promises. But the documentation needs some work.