0

For a web page that requires several kinds of data (i.e. for different widgets), how do you structure the API calling from the client-side? For instance, I have an application that is currently doing something like the following...

api.doOne(function (resultOne) {
    api.doTwo(..., function (resultTwo) {
        api.doThree(..., function (resultThree) {
            api.doFour(function (resultFour) {
                ...
                   api.doTen(function(resultTen) {
                       finallyDisplayPage(resultTen);

... and it seems so wrong. Apart from the fact that there is major "callback-hell", it seems to defeat the purpose of asynchronous programming, because each api call is waiting for the old one to finish processing. So it is really slow as well... but what is the alternative? Should the application do the following instead?

// essential information before display
api.doOne(function (resultOne) {
    api.doTwo(..., function (resultTwo) {
        displayPage(resultTwo);
    }
}

// the remaining can data can be inserted after the inital page load
api.doThree(..., function (resultThree) {
    displayPage(resultThree);
}

api.doFour(function (resultFour) {
    displayPage(resultFour);
}

...

api.doTen(function(resultTen) {
    displayPage(resultTen);
}

Any advice, hints, or pointers to examples I can view online would be appreciated.

Grateful
  • 9,685
  • 10
  • 45
  • 77
  • 2
    [Use promises.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) – Ry- Oct 27 '16 at 03:21
  • 1
    You want to make your async operations return promises and then use `Promise.all()`. You can launch them all in parallel and `Promise.all()` will both tell you when they are all done and collect all the results for you in order. – jfriend00 Oct 27 '16 at 03:26
  • Thank you, Ryan and jfriend00. It is very interesting. Do you recommend any examples for further investigation? – Grateful Oct 27 '16 at 04:46
  • Upon reading the documentation, it appears to me that promises take the order into consideration and that if one of the passed-in promises is rejected... the remainder will all be rejected! If that is really the case, then it doesn't sound like something that I want to use... because more than half of the API calls are actually independent and do not need to necessarily wait for the others to finishing loading. Secondly, if one api call is rejected, I want the remaining independent calls to continue loading. Is anything missing here? – Grateful Oct 27 '16 at 04:51
  • @Grateful - You asked how to make N calls in parallel and know when they are all done. It returns the results in order. It doesn't fire the calls in order - it fires them all in parallel. We offered you a way to do that. If you want to ignore errors, that's simple to do too. There's a similar concept called `Promise.settle()` that keeps going on all actions, even if errors and tells you when all have completed. Here's a version of [`Promise.settle()`](http://stackoverflow.com/questions/36605253/es6-promise-all-error-handle-is-settle-needed/36605453#36605453). – jfriend00 Oct 27 '16 at 06:51
  • Otherwise, just fire all the requests and then keep yourself a manual counter on when they've all completed and keep track of the results yourself. That's all `Promise.all()` is doing internally - the code is just already written for you if you use `Promise.all()` or `Promise.settle()`. – jfriend00 Oct 27 '16 at 06:53
  • @jfriend00 I appreciate the time you are taking for this. I may not have explained the question properly. In the first example, I was just saying that the application I have in front of me is doing it that way. However, it is incorrect, because it is making every API call wait for the previous one to complete...even though most of the API calls are independent of each other. So, I don't need the order at all. I would just like to be able to fire all independent calls in parallel, and simply update the results on my site as they come in. Is this something I should use 'promises' for? – Grateful Oct 27 '16 at 07:28
  • Well, promises are helpful for managing ANY set of asynchronous operations. Once you learn them, you will never use plain callbacks again. In your case, you can just fire off all your async operations and as one finishes, just process its result. Same with all the others. I'm really not sure what the question is any more. Every time we think we've answered your question, you dodge that answer by saying that wasn't really your requirement. When your actual requirements are more clear, we could help more. – jfriend00 Oct 27 '16 at 07:29
  • Again, @jfriend00 I appreciate the time you are taking to answer my questions. From your last comment, is it safe for me to assume that using 'promises' I will be able to "fire all independent calls in parallel, and simply update the results on my site as they come in." without forcing any particular order whether it's making the calls or receiving the results? – Grateful Oct 27 '16 at 07:52

0 Answers0