How to get the REST response message in ExtJs 4?

Question

I'm building upon RESTFul Store example of ExtJs 4. I'd like my script to display errors provided by the REST server, when either Add or Delete request fails. I've managed to obtain the success status of a request (see the code below), but how do I reach the message provided with the response?

Store:

    var store = Ext.create('Ext.data.Store', {
    model: 'Users',
    autoLoad: true,
    autoSync: true,
    proxy: {
        type: 'rest',
        url: 'test.php',
        reader: {
            type: 'json',
            root: 'data',
            model: 'Users'
        },
        writer: {
            type: 'json'
        },
        afterRequest: function(request, success) {
            console.log(success); // either true or false
        },
        listeners: { 
            exception: function(proxy, response, options) {

                // response contains responseText, which has the message
                // but in unparsed Json (see below) - so I think 
                // there should be a better way to reach it than 
                // parse it myself

                console.log(proxy, response, options); 
            }
        }
    }
});

Typical REST response:

"{"success":false,"data":"","message":"VERBOSE ERROR"}"

Perhaps I'm doing it all wrong, so any advice is appreciated.

Answer 1

I assume that your service follows the REST principle and uses HTTP status codes other than 2xx for unsuccessful operations. However, Ext will not parse the response body for responses that do not return status OK 2xx. What the exception/response object (that is passed to 'exception' event listeners) does provide in such cases is only the HTTP status message in response.statusText.

Therefore you will have to parse the responseText to JSON yourself. Which is not really a problem since it can be accomplished with a single line.

var data = Ext.decode(response.responseText);

Depending on your coding style you might also want to add some error handling and/or distinguish between 'expected' and 'unexpected' HTTP error status codes. (This is from Ext.data.reader.Json)

getResponseData: function(response) {
    try {
        var data = Ext.decode(response.responseText);
    }
    catch (ex) {
        Ext.Error.raise({
            response: response,
            json: response.responseText,
            parseError: ex,
            msg: 'Unable to parse the JSON returned by the server: ' + ex.toString()
        });
    }

    return data;
},

The reason for this behavior is probably because of the REST proxy class not being a first class member in the data package. It is derived from a common base class that also defines the behavior for the standard AJAX (or JsonP) proxy which use HTTP status codes only for communication channel errors. Hence they don't expect any parsable message from the server in such cases. Server responses indicating application errors are instead expected to be returned with HTTP status OK, and a JSON response as posted in your question (with success:"false" and message:"[your error message]").

Interestingly, a REST server could return a response with a non-2xx status and a response body with a valid JSON response (in Ext terms) and the success property set to 'true'. The exception event would still be fired and the response body not parsed. This setup doesn't make a lot of sense - I just want to point out the difference between 'success' in terms of HTTP status code compared to the success property in the body (with the first having precedence over the latter).

Update

For a more transparent solution you could extend (or override) Ext.data.proxy.Rest: this will change the success value from false to true and then call the standard processResponse implementation. This will emulate 'standard' Ext behavior and parse the responseText. Of course this will expect a standard JSON response as outlined in your original post with success:"false" (or otherwise fail). This is untested though, and the if expression should probably be smarter.

Ext.define('Ext.ux.data.proxy.Rest', {
    extend: 'Ext.data.proxy.Rest',

    processResponse: function(success, operation, request, response, callback, scope){
        if(!success && typeof response.responseText === 'string') { // we could do a regex match here
            var args = Array.prototype.slice.call(arguments);
            args[0] = true;
            this.callParent(args);
        } else {
            this.callParent(arguments);
        }
    }
})