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:
- Basic authentication failure on back-end (browser returns
403 Forbidden) - 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.
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:
- Basic authentication failure on back-end (browser returns
403 Forbidden) - 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.
Share edited Dec 6, 2016 at 9:35 tony19 139k23 gold badges278 silver badges347 bronze badges asked Dec 6, 2016 at 7:02 behnam Tehranibehnam Tehrani 712 silver badges5 bronze badges2 Answers
Reset to default 7When 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/polymer+1.11.1/ponents/">
<script src="webponentsjs/webponents-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/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/polymer+1.11.1/ponents/">
<script src="webponentsjs/webponents-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/status/404"
auto
on-response="_onResponse"
on-error="_onError"></iron-ajax>
<div>'on-error' status: [[errorStatus]] ([[errorStatusText]]) - [[errorMessage]]</div>
</template>
</dom-module>
</body>codepen
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."
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-ponent',
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>