Create my own iron-ajax element

Question

I want to create my own iron-ajax element, that does what iron-ajax does but a little more, add some headers to the request, at the moment I always add the header via data-binding to the headers property of iron-ajax but I dont want to code that on every element I build, I want the iron-ajax Element to do this by itself.

Is there a way to extend iron-ajax?

Edit:

<template>
    <iron-ajax
            auto
            url="[[url]]"
            handle-as="json"
            debounce-duration="1000"
            on-response=""
            headers="[[headers]]"
    ></iron-ajax>
</template>
<script>
    (function() {
        'use strict';

        Polymer({
            is: 'em-ajax',

            properties: {
                headers: {
                    type: Object,
                    computed: 'computeHeaders(token)'
                },
                token: {
                    type: String,
                    notify: true,
                    value: "asdf"
                },
                url: {
                    type: String
                }
            },
            computeHeaders: function() {
                return {'Authorization' : 'Bearer {' +  app.accessToken + '}'};
            },
            handleRequest: function(request) {
                console.log("handling request", request);
                request.header = this.computeHeaders();
            }


        });
    })();
</script>

    <em-ajax
            url="http://api.asdf.safd.sdf/profile"
            on-response="handleProfile"
    ></em-ajax>

How can I handle the on-response? Passing a String with the method name does not seem to work.

The Answer I marked is correct. For my edited question I found a solution:

                this.fire('em-response', {event: event, request: request});

I fire an event in my custom ajax Element, and in the element I use the custom ajax element I added a listener. Is this a good solution?

Answer 1

You can embed <iron-ajax> into your own <fancy-ajax> component and forward properties in and out between <fancy-ajax> and <iron-ajax> .

<dom-module id="fancy-ajax">
  <template>
    <iron-ajax ...></iron-ajax>
  </template>
</dom-module>