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 (i.e. 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>