Search code examples
javascriptpolymer

Polymer iron-ajax response code

I am using Polymer 1.6 and <iron-ajax> for my API calls. I cannot distinguish between these two situations based on iron-ajax-error event:

  1. Basic authentication failure on back-end (browser returns 403 Forbidden)
  2. Service not found (browser returns 404 Not Found)

In both situations, the response body is empty even though in the authentication problem, the server responds with a JSON body.

I would like to read the response status code, or be able to get the response body in situation 1.

Solution

  • When the server responds with an error, the response body is supposed to be null according to the spec. However, <iron-ajax>'s event detail still provides access to the status code and status text.

    <iron-ajax>.response event

    The event detail of the <iron-ajax>.response event is an <iron-request>. The status code is stored in <iron-request>.status and the corresponding text is in <iron-request>.statusText:

    _onResponse: function(e) {
  const req = e.detail; // iron-request
  console.log('status', req.status, req.statusText);
}


    HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    _onResponse: function(e) {
      const req = e.detail;
      console.log('response', req.status, req.statusText);
      this.responseStatus = req.status;
      this.responseStatusText = req.statusText;
    },
    _onError: function(e) {
      const req = e.detail.request;
      const err = e.detail.error;
      console.log('error', err, req.status, req.statusText);
      this.errorStatus = req.status;
      this.errorStatusText = req.statusText;
      this.errorMessage = err;
    }
  });
});
    <head>
  <base href="https://polygit.org/polymer+1.11.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-ajax/iron-ajax.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <iron-ajax url="//httpbin.org/status/200"
                 auto
                 on-response="_onResponse"
                 on-error="_onError"></iron-ajax>
      <div>'on-response' status: [[responseStatus]] ([[responseStatusText]])</div>
    </template>
  </dom-module>
</body>

    <iron-ajax>.error event

    Note the <iron-ajax>.error event's detail is different from that of the <iron-ajax>.response. The error's event detail is an object with the following shape:

    {
  error: String,
  request: iron-request
}

    So the <iron-ajax>.error event handler could read the status and status text as follows:

    _onError: function(e) {
  const req = e.detail.request; // iron-request
  console.log('status', req.status, req.statusText);
}


    HTMLImports.whenReady(() => {
  Polymer({
    is: 'x-foo',
    _onResponse: function(e) {
      const req = e.detail;
      console.log('response', req.status, req.statusText);
      this.responseStatus = req.status;
      this.responseStatusText = req.statusText;
    },
    _onError: function(e) {
      const req = e.detail.request;
      const err = e.detail.error;
      console.log('error', err, req.status, req.statusText);
      this.errorStatus = req.status;
      this.errorStatusText = req.statusText;
      this.errorMessage = err;
    }
  });
});
    <head>
  <base href="https://polygit.org/polymer+1.11.1/components/">
  <script src="webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="polymer/polymer.html">
  <link rel="import" href="iron-ajax/iron-ajax.html">
</head>
<body>
  <x-foo></x-foo>

  <dom-module id="x-foo">
    <template>
      <iron-ajax url="//httpbin.org/status/404"
                 auto
                 on-response="_onResponse"
                 on-error="_onError"></iron-ajax>
      <div>'on-error' status: [[errorStatus]] ([[errorStatusText]]) - [[errorMessage]]</div>
    </template>
  </dom-module>
</body>

    codepen