请求失败时，无法在JSONP代理回调中获得响应

Question

I'm trying to append some logic to all the stores. I want this logic to execute before the one that is defined all through the app's stores

Basically, I want one chunk of code to look at the response from the server, if it gets something back in particular, do something, if not, then proceed with whatever was going to happen by calling this.callParent() I guess.

This seemed to do what I want but it's old and not working for 4.2.1

http://www.learnsomethings.com/2011/09/01/adding-some-error-detection-to-all-your-extjs-stores-with-one-simple-block-of-code/

Now here's what I do in 4.2.1 and it seems to be working

Ext.define('App.overrides.Data.Store', {
    override: 'Ext.data.Store',
    load: function (options) {
        if (options != null) {
            options.callback = storeLoad;
        }
        this.callParent(arguments);
    }
});

storeLoad: function (records, operation, success) {
    // operation.response is undefined on failures...       
}

But as noted in the comment above, I cannot get an operation.response if the request failed with 400,401,500, etc. code.

If I browse the exact URL ExtJS generates on load that is supposed to return an error with the string I want, I get this:

Ext.data.JsonP.callback4({"Message":"The string!"})

This output is returned by my .NET Web API backend:

actionContext.Response = actionContext.Request.CreateResponse(HttpStatusCode.Unauthorized, PortalResources.THE_STRING);

If I change the HttpStatusCode to OK , I will then be able to get the response in storeLoad above, but not if the status <> 200.

I thought it was my backend not returning the response properly, but ExtJS and/or my comprehension of it seems to be the problem. I think it's how my store/proxy is defined since when the server return sa status of <> 200, I don't even see the response content in Chrome's debugger.

Here's one of my stores:

Ext.define('Customer_Portal_UI.store.Contact', {
    extend: 'Ext.data.Store',
    model: 'Customer_Portal_UI.model.Contact',
    limitParam: false,
    pageParam: false,
    startParam: false
});

//.......

Ext.create('Customer_Portal_UI.store.Contact', {
    storeId: 'myContactStore',
    proxy: {
        type: 'jsonp',
        url: this.Urls.contactGetAllApiUrl,
        headers: { 'Content-type': 'application/json' },
        reader: { type: 'json', root: 'Contacts' }
    }
});

I tried the override mentioned in there , but same problem. Response is undefined on failure. I crawled all the way up in the framework chain and I can't seem to find a proper override to do this.

Any ideas ?

Answer 1

I switched to a vanilla Ajax proxy, now I can retrieve the response text correctly on failed requests.

This is what I ended up doing:

Ext.Ajax.on('requestexception', function (conn, response, options) {
        //If an AJAX request receives this response text & status, log the user out.
        //regardless of the resource that was queried
        if (response.responseText == GlobalVars.loginError && response.status == 408) {

            //the following stops extra logic from executing (if you had configured a 'failure' option on your request in the controller)
            delete options.failure;
            delete options.callback;

            //show the user a message box with an OK button that when clicked logs the user out...
            Utils.maxIdleReached();
        }
        else {
            //do nothing...
            //let controller logic do it's thing then as individual store/requests have 'failure' options configured for each....
        }
});

This catches exceptions (requests that received status codes of 400, 401, 408, 404, 500, etc.) whether they were done through a store load or plain Ext.Ajax.request .