iron-ajax
is generally the backbone of any Polymer web app that retrieves data from an API. It’s built on top of the Promise API and should handle just about all of your network needs.
Usage in DOM
<!-- html -->
<iron-ajax id="getUser"
method="GET"
on-response="_getUserSuccess"
on-error="_getUserError"
withCredentials="true"></iron-ajax>
Basic GET
request. I like to set as the id
to exactly what the call will be doing; in this case getting user data. There’s plenty of properties to take advantage of but I place emphasis on setting on-response
and on-error
.
Something that I found that works for my teams is explicitly naming the response and error handlers to the id
of the element, preceded by an underscore, and followed by Success
and Error
respectively.
This helps with alleviating confusion when there are multiple iron-ajax
elements in your module and multiple success and error handlers. Also, make sure the handlers are used exclusively for the network response.
<!-- html -->
<iron-ajax id="getUser"
method="GET"
on-response="_getUserSuccess"
on-error="_getUserError"
withCredentials="true"></iron-ajax>
<iron-ajax id="updateUser"
method="POST"
on-response="_updateUserSuccess"
on-error="_updateUserError"
withCredentials="true"></iron-ajax>
Usage in component
Let’s say when you navigate to your profile, you fire a GET
request to retrieve your data:
// polymer element
load() {
this.$.getUser.headers = {
'Authorization':'Bearer ' + token,
'Content-Type': 'application/json'
};
this.$.getUser.params = params;
this.$.getUser.body = JSON.stringify(data);
this.$.getUser.url = super.getURL() + '/user/' + data.id;
this.$.getUser.generateRequest();
}
Explicitly target the iron-ajax
element by id
and explicitly set headers
, urls
, params
, body
, etc. It’s much easier to keep track of what’s being set where and you know exactly what you’re passing to your request. This way you don’t have to worry about messing with the properties of your component and binding to your iron-ajax
elements.
Then when you modify and update your user data:
// polymer element
_updateUser() {
this.$.updateUser.headers = {
'Authorization':'Bearer ' + token,
'Content-Type': 'application/json'
};
this.$.updateUser.body = newUserData:
this.$.updateUser.url = super.getURL() + '/user/' + data.id;
this.$.updateUser.generateRequest();
}
Handling responses
After generateRequest()
is called, control is handed over to your handlers based on the network response and the appropriate one is called:
// polymer element
static get properties() {
return {
userInfo: {
type: Object,
value: {}
}
}
}
ready() {
super.ready();
this.load();
}
load() {
this.$.getUser.headers = {
'Authorization':'Bearer ' + token,
'Content-Type': 'application/json'
};
this.$.getUser.body = JSON.stringify(data);
this.$.getUser.url = super.getURL() + '/user/' + data.id;
this.$.getUser.generateRequest();
}
_getUserError(error) {
console.log('error getting user data: ', error);
super.notify('Unable to get user data.');
}
_getUserSuccess(response) {
response = response.target.lastResponse;
this.set('userInfo', response);
}
The actual response body object will be response.target.lastResponse
which we’ll set to this.userInfo
for use.