javascriptajaxpromisepolymeriron-ajax

A promise with iron-ajax response


How can I write a Promise where the response is coming from an iron-ajax.

<iron-ajax id="listItems" method="GET" content-type="application/json" handle-as="json" last-response="{{items}}" on-error="handleErrorResponse"></iron-ajax>

this.data =  {
    get: function(sort, page, pageSize) {
            return new Promise(function(resolve, reject) {
                // Execute iron-ajax.
                //...
                // resolve(iron-ajax's response);
            });
        }
    }
};


Solution

  • You're looking for listItem.generateRequest(), since that returns iron-ajax's accompanying iron-request object, which in turn provides a promise, named request.completes.

    https://www.webcomponents.org/element/PolymerElements/iron-ajax/iron-ajax#method-generateRequest

    https://www.webcomponents.org/element/PolymerElements/iron-ajax/iron-request#property-completes

    I modified your code sample below:

    <iron-ajax id="listItems" method="GET" content-type="application/json" handle-as="json" last-response="{{items}}" on-error="handleErrorResponse"></iron-ajax>
    
    this.data =  {
        get: function(sort, page, pageSize) {
                return this.$.listItems.generateRequest().completes;
            }
        }
    };

    Inspired by the more complex example at https://stackoverflow.com/a/37995462/2795627. Kudos to @akivajgordon.