CODEWITHSUNDEEP
javascriptpolymer
behnam Tehrani
behnam Tehrani

Reputation: 71

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.

Upvotes: 1

Views: 3269

Answers (2)

tony19
tony19

Reputation: 138696

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

Upvotes: 7

philipjkim
philipjkim

Reputation: 4149

When I want to see the response for error cases, I register an handler function to error event and look up e.detail.response or e.detail.request.xhr.response, like followings:

<dom-module id="my-login">
  <template>
    <iron-ajax url="http://some-url.com" 
           method="POST" 
           content-type="application/x-www-form-urlencoded" 
           body="{{reqBody}}" 
           handle-as="json"
           on-response="onResponse" 
           on-error="onError" id="xhr"></iron-ajax>
  </template>

  <script>
  Polymer({
      is: 'my-component',
      properties: {
        reqBody: {
          type: Object,
          value: {}
        }
      },
      onResponse: function(e) {
        console.log(e.detail.response);
      },
      onError: function(e) {
        // I think one of those two would be what you're looking for.
        console.log(e.detail.response);
        console.log(e.detail.request.xhr.response);
      }
  });
  </script>
</dom-module>

Upvotes: 1

Related Questions