Polymer 1.0: Multiple calls to send() method of iron-request
Asked Answered
E

1

10

I have a component that uses an instance of <iron-ajax> to retrieve data from the back-end, and I would like to use <iron-request> to send updates such as POST/DELETE requests.

Everything works perfectly the first time around. However if the request is invoked again, I get an error:

Uncaught TypeError: Cannot read property 'then' of undefined

My template definition looks like this:

...
<iron-ajax id="ajax" auto verbose
    url="/cart-api/"
    last-response="{{ajaxResponse}}"
    handle-as="json">
</iron-ajax>

<iron-request id="xhr"></iron-request>
...

In my component script I use the send() method of <iron-request> to send a POST:

var me = this;
this.$.xhr.send({
    url: "/cart-api",
    method: "POST",
    body: JSON.stringify(entry)
}).then(function() {
    me._refresh();
}, function() {
    console.error("POST failed");
});

The error message indicates that send has returned undefined rather than a valid Promise object.

So my question is this: is an <iron-request> element actually reusable? Do I need to do anything to refresh or reinitialize it?

UPDATE

Thanks to @Zikes I have updated my code as follows:

<iron-ajax id="ajaxGet" auto
    url="/cart-api/"
    last-response="{{ajaxResponse}}"
    handle-as="json">
</iron-ajax>

<iron-ajax id="ajaxPost" url="/cart-api" method="POST" on-response="_refresh"></iron-ajax>

<iron-ajax id="ajaxDelete" method="DELETE" on-response="_refresh"></iron-ajax>
insertEntry: function(entry) {
    this.$.ajaxPost.body = JSON.stringify(entry);
    this.$.ajaxPost.generateRequest();
},

_handleRemove: function(e) {
    var entry = e.currentTarget.entry;
    this.$.ajaxDelete.url = "/cart-api/" + entry.id;
    this.$.ajaxDelete.generateRequest();
},

_refresh: function() {
    this.$.ajaxGet.generateRequest();
},
Explicate answered 2/6, 2015 at 17:58 Comment(0)
C
6

The <iron-ajax> component spawns a new <iron-request> for each new request made: https://github.com/PolymerElements/iron-ajax/blob/master/iron-ajax.html#L442

If you are looking for reusability (and other nice features like debounce) you would probably be better off using the <iron-ajax> component.

Collbaith answered 2/6, 2015 at 18:0 Comment(10)
Thanks but can iron-ajax be used for non-GET requests?Explicate
Yep! It has a method parameter: github.com/PolymerElements/iron-ajax/blob/master/…Collbaith
Just turn off auto, else it will fire the request immediately when a single parameter changes (unless it's in the middle of a debounce). Changing multiple parameters can result in multiple incomplete requests.Collbaith
Thanks again. For delete I need to change the URL to append the ID of the item I'm deleting. Is the correct pattern to set the URL property of the element from my script and then call generateRequest?Explicate
Once you've finished changing your properties call this.$.ajax.generateRequest() to send the request and return the generated <iron-request> component for that request.Collbaith
Thanks, could you look at my update to the question and tell me whether I have understood you correctly?Explicate
is there a way to re-initialize iron-request? I'm trying to set xhr.readyState but it's not allowed. should I create a new iron-request each time a request fails? this seems awkward to meRoyceroyd
@PacketTracer You shouldn't be creating the iron-request yourself, that is done automatically via iron-ajax. If you use the iron-ajax component as intended, it will handle initialization automatically for all requests you give it.Collbaith
i've refactor my code to use iron-ajax, but...then why it is in the docs? a bit confusing elements.polymer-project.org/elements/…Royceroyd
There are cases where it might be beneficial to use the iron-request on its own, but those are fairly rare. The iron-ajax component is the one that is built for general consumption, and what most people actually need. At any rate, documentation is generated automatically from the component's source, and while iron-request is mostly managed by iron-ajax you may still need to interact with iron-request from time to time, so that documentation needs to be made available.Collbaith

© 2022 - 2024 — McMap. All rights reserved.