Polymer 2.0 Component Usage

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.