Polymer iron-ajax and asynchronous requests (etag sync and response handling)

Question

I'm looking for a tried and true way of handling asynchronous calls to API endpoints returning JSON (using polymer's latest rendition of the iron-ajax element). These API calls rely on etag matching, so it is important that the etag sent matches the one on the server. I have that part working, except in certain circumstances, where quick succession API calls may cause an out-of-sequence response (and therefore can get the etag out of sync). There are also multiple API endpoints (ie different URLs). So, sometimes if quick succession calls using different endpoints are initiated via an iron-ajax element, it can cause issues for the response handler function, as the response handler currently checks the URL of the ajax element to know how to handle the response appropriately. Therefore, if the 2nd call overwrites the URL of the ajax component before the 1st call response is received, when the 1st call does come back the responseHandler doesn't handle it appropriately. Perhaps there is a much better and reliable way of checking exactly which call has returned?

I know I'm not the first person to encounter this scenario, so I'm wondering if someone out there can show me the enlightened path? I'm thinking there is a simple strategy to handle this problem, perhaps implementing call queuing etc., but I'm not sure if iron-ajax has anything built-in that could help in that regard.

An example with some sample code would be absolutely stupendous!

Answer 1

If you depend on multiple API endpoints, I would have a separate iron-ajax element for each one so that they don't stomp on each other if the URLs change (through data-binding or something):

<iron-ajax id="cats" url="https://api.example.com/cats" handle-as="json"></iron-ajax>
<iron-ajax id="dogs" url="https://api.example.com/dogs" handle-as="json"></iron-ajax>

Generate the requests, and use Promise.all() to wait for both requests to complete:

<script>
    Polymer({
        is: 'my-element',

        ...,

        fetchPets: function () {
            var catsRequest = this.$.cats.generateRequest();
            var dogsRequest = this.$.dogs.generateRequest();

            Promise.all([catsRequest.completes, dogsRequest.completes])
                .then(function (requests) {
                    var cats = requests[0].response;
                    var dogs = requests[1].response;

                    // do whatever you want from here...
                    alert(cats.concat(dogs));
                });
        }
    })
</script>

Answer 2

Firstly iron-ajax uses iron-request under the skin and that returns a Promise.

I think what you are trying to achieve is that with a string of sequential calls, you can have the same order of responses, despite them all running, possibly in parallel.

This article has an example of doing this with a set of chapters from a story http://www.html5rocks.com/en/tutorials/es6/promises/

The article gives an online example here: http://www.html5rocks.com/en/tutorials/es6/promises/async-best-example.html

In essence it is doing a Promise.all(array of requests).then(...) to give you an ordered array of responses.

If you look at the source code for iron-ajax, you will see how it creates the iron-request, and then uses it. You could do the same but based on the example I have pointed to above.

If I have misunderstood, and you are trying to ensure the requests go out sequentially, then you can still do that with Promises, but instead of using Promise.all, you chain them with .then clauses one after the other.