Polymer - Iron Ajax - How to Handle Error Response

Question

I have a standard iron-ajax element that sends a login request with an email and password to the backend.

<iron-ajax
     id="postLoginForm"
     method="POST"
     verbose
     url="../../login"
     content-type="application/json"
     handle-as="json"
     last-error="{{lastError}}"
     last-response="{{lastResponse}}"
     on-response="_handleLoginResponse"></iron-ajax>

My _handleLoginResponse is this, which works fine btw:

_handleLoginResponse: function (event) {
    console.log(event.detail.response);
},

This is always the response I am getting from the server:

{"email":["The email field is required."],"password":["The password field is required."]}

The problem is now, that the _handleLoginResponse method is only called, when the status code of the response is 200 .

But if the login failes, the servers sends a status code of 422 Unprocessable Entity that does not trigger the _handleLoginResponse method. Though the response contains the above mentioned json string.

What I would like to do:

I would like to send the request without credentials. If the request successively fails I receive a response with a status code that is not 200. I want to display the errors on the page.

But I don't know how to access the response, if the _handleLoginResponse method does not trigger, when the status code is not 200.

How do I trigger the _handleLoginResponse method, when I get a 422 status code?

Answer 1

All 4** and 5** are error codes. This means you might also have to listen to iron-ajax error event.