Как перехватить все запросы AJAX, сделанные различными библиотеками JS

Question

Как перехватить все запросы AJAX, сделанные различными библиотеками JS

Я создаю веб-приложение с различными библиотеками JS (AngularJS, OpenLayers,...) и нужен способ перехватить все ответы AJAX, чтобы иметь возможность, в случае истечения срока действия зарегистрированного сеанса пользователя (ответ возвращается с 401 Unauthorized статус), чтобы перенаправить его на страницу входа.

Я знаю, что AngularJS предлагает interceptors управлять такими сценариями, но не смог найти способ добиться такой инъекции в запросы OpenLayers. Поэтому я выбрал подход vanilla JS.

здесь я нашел этот кусок кода...

(function(open) {



    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {



        this.addEventListener("readystatechange", function() {

            console.log(this.readyState); // this one I changed

        }, false);



        open.call(this, method, url, async, user, pass);

    };



})(XMLHttpRequest.prototype.open);

...который я адаптировал и выглядит так, как он ведет себя, как ожидалось (только протестировал его на последнем Google Chrome).

поскольку он изменяет прототип XMLHTTPRequest, мне интересно, насколько это опасно, или если это может привести к серьезным проблемам с производительностью. И, кстати, будет ли какая-то действительная альтернатива?

обновление: как перехватывать запросы, прежде чем они будут отправлены

предыдущий трюк работает нормально. Но что, если в тот же сценарий, который вы хотите ввести некоторые заголовки перед отправкой запроса? Сделайте следующее:

(function(send) {



    XMLHttpRequest.prototype.send = function(data) {



        // in this case I'm injecting an access token (eg. accessToken) in the request headers before it gets sent

        if(accessToken) this.setRequestHeader('x-access-token', accessToken);



        send.call(this, data);

    };



})(XMLHttpRequest.prototype.send);

961 4

javascript ajax interceptor

4 ответов:

Comments

Ничего не найдено.

jfriend00 · Accepted Answer · 2017-01-02 15:13:48

этот тип функции зацепления совершенно безопасен и делается регулярно на других методах по другим причинам.

и, единственное влияние на производительность действительно только один дополнительный вызов функции для каждого .open() плюс любой код, который вы выполняете самостоятельно, что, вероятно, несущественно, когда задействован сетевой вызов.

в IE, это не будет ловить любой код, который пытается использовать ActiveXObject метод управления выполнением Ajax. Хорошо написанный код сначала ищет XMLHttpRequest объект и использует это, если доступно, и это было доступно с IE 7. Но, может быть какой-то код, который использует ActiveXObject метод, если он доступен, что было бы верно через гораздо более поздние версии IE.

в современных браузерах существуют и другие способы вызова Ajax, такие как fetch() интерфейс поэтому, если вы хотите подключить все вызовы Ajax, вам нужно подключить больше, чем просто XMLHttpRequest.

Walty Yeung · Accepted Answer · 2017-06-05 18:58:35

как любезно указал редактор Firefox AMO Rob W,

следующий код изменяет поведение XMLHttpRequest. По умолчанию, если третий ("асинхронный") параметр не указан, он по умолчанию равен истинный. Когда он указан и не определен, он эквивалентен " false", который превращает запрос в синхронный HTTP-запрос. Это вызывает Пользовательский интерфейс для блокировки во время обработки запроса, а также некоторые функции API XMLHttpRequest отключены тоже.

...

чтобы исправить это, замените open.призывать.(...) с открытым.применить(это, аргументы);

и вот ссылка:

https://xhr.spec.whatwg.org/#the-open () - метод

wendu · Accepted Answer · 2018-03-08 13:19:24

Ajax-hook - это библиотека с открытым исходным кодом для подключения глобального объекта XMLHttpRequest и изменения запроса и ответа Ajax по умолчанию . github:https://github.com/wendux/Ajax-hook ， например:
hookAjax({

  //hook callbacks
  onreadystatechange:function(xhr){
   console.log("onreadystatechange called: %O",xhr)
  },

  onload:function(xhr){
   console.log("onload called: %O",xhr)
  },

  //hook function
  open:function(arg,xhr){
   console.log("open called: method:%s,url:%s,async:%s",arg[0],arg[1],arg[2])
  }

})

Jeremy J Starcher · Accepted Answer · 2014-08-16 03:13:45

Это не будет ловить XMLHttpRequests для некоторых версий IE (9 и ниже). В зависимости от библиотеки, они могут искать проприетарный элемент управления ActiveX IE в первую очередь.

и, конечно, все ставки выключены, если вы используете нестрогий ДОКТИП под IE, но я уверен, что вы это знали.

ссылки: CanIuse