Equivalent of angularjs interceptor in jquery

I would like to intercept response from REST request as $httpProvider.interceptors does in agularjs : https://docs.angularjs.org/api/ng/service/$http

I am making a very little interface with jQuery and would not like to use angular just for this. Do you have and Idea ?

Actually my real problem to fix is the same as this one : Dealing with a 301 and location headers for a REST response in cross-domain

But I would like to solve it the same way with jquery.

I tried this without success : (only catch a 0 status never a 301...)

How can I intercept ajax responses in jQuery before the event handler?

To answer V31, I did this :

$.ajaxSetup({
    error: function(jqXHR, textStatus, errorThrown) {
        if (jqXHR.status == 301) {
            alert("Element not found.");
        } else {
            console.log(jqXHR.status);
            console.log("Error: " + textStatus + ": " + errorThrown);
        }
    }
});

Here is my console : console responses

Which says :

XMLHttpRequest cannot load *******. The request was redirected to '**************', which is disallowed for cross-origin requests that require preflight. 
0 
Error: error:  

Answers:

Answer

If interpret Question at OP accurately , requirement is to perform a task based on statusCode (301) returned from an $.ajax() call ? ; prior to , or instead of success , error callback ?

Appear that the error callback at OP occur after given response statusCode . Piece below should call statusCode callback before any success , error callback that may be attached to $.ajax().

Try

    $.ajaxSetup({
        statusCode: {
            301: function (data, textStatus, jqxhr) {
                var callback = function (name) {
                  $("#results").html(name)
                };
                if (jqxhr.status === 301) {
                // do stuff
                    alert(jqxhr.readyState, jqxhr.getAllResponseHeaders());
                    callback("response: " + String(data || jqxhr.responseText) 
                            + "<br />textStatus: " + textStatus 
                            + "<br />statusCode : " + jqxhr.status 
                            + "<br />statusText : " + jqxhr.statusText);
                };

            }
        }
    });

jsfiddle http://jsfiddle.net/guest271314/D23k2/

See http://api.jquery.com/jquery.ajax/#jQuery-ajax-settings

Answer

You can make use of ajaxSetup in order to catch 301 errors, something like this:

$.ajaxSetup({
    error : function(jqXHR, textStatus, errorThrown) {
        if (jqXHR.status == 0) {
            alert("Element not found.");
        } else {
            alert("Error: " + textStatus + ": " + errorThrown);
        }
    }
});

More on jquery ajax setup

UPDATE:

To handle CORS issue you need to enable cross domain calls, something like this:

var app = angular.module('myApp', []);

  app.config(function($httpProvider) {
      //Enable cross domain calls
      $httpProvider.defaults.useXDomain = true;

      //Remove the header used to identify ajax call  that would prevent CORS from working
      delete $httpProvider.defaults.headers.common['X-Requested-With'];
  });

As you have mentioned that the server side code is not in your hand you need to raise a request to that party in order to include these headers in the response of their API call (if not already done)

 'Access-Control-Allow-Origin' => '*', 
 'Access-Control-Allow-Methods' => ['OPTIONS', 'GET', 'POST']  

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.