Fly.js перехватывает глобальные запросы Ajax

JavaScript Ajax

В большинстве случаев наши Ajax-запросы выполняются через интерфейсные библиотеки разработки, фреймворки, такие как jQuery, axios или Fly. Эти библиотеки сами по себе будут иметь некоторые перехватчики запроса/ответа для предварительной обработки запросов и ответов Ajax. Однако, если вы не используете эти сетевые библиотеки, или вы не являетесь разработчиком веб-страницы, и вам необходимо анализировать все Ajax-запросы для веб-страницы, или если вы являетесь разработчиком приложения, ваш веб-просмотр должен перехватывать все Ajax-запросы. Запросы Сетевые запросы для веб-страниц (веб-страницы разработаны не вами)... В этом случае вам необходимо перехватывать глобальные Ajax-запросы.

принцип

Независимо от того, через какой фреймворк или библиотеку ваше приложение выполняет Ajax-запросы, в конечном итоге оно вернется кXMLHttpRequest. Поэтому суть перехвата заключается в подмене родного браузераXMLHttpRequest. В частности, сохраните перед заменойXMLHttpRequest, а затем решить, следует ли инициировать сетевой запрос в соответствии с конкретной бизнес-логикой в ​​процессе запроса.XMLHttpRequestпример.

Fly перехватывает глобальный ajax

Если вы еще не знакомы с fly, посетите его официальный сайт:Temp.GitHub.IO/Day3/#/doc/…

Мы знаем, что в Fly,XMLHttpRequestтолько одинhttp engine. Итак, мы хотим перехватить, нам просто нужно настроить движок, чтобы заменить глобальныйXMLHttpRequestВот и все, и Fly предоставляет инструменты для быстрой генерации движков, поэтому мы можем легко реализовать перехват.

Давайте сначала рассмотрим простой пример, функция заключается в выводе URL-адреса и метода каждого сетевого запроса.

выполнить

 var log = console.log;
//切换fly engine为真正的XMLHttpRequest
fly.engine = XMLHttpRequest;
var engine = EngineWrapper(function (request, responseCallback) {
    console.log(request.url, request.method)
    //发起真正的ajax请求
    fly.request(request.url, request.data, request)
        .then(function (d) {
            responseCallback({
                statusCode: d.engine.status,
                responseText: d.engine.responseText,
                statusMessage: d.engine.statusText
            })
        })
        .catch(function (err) {
            responseCallback({
                statusCode:err.status,
                statusMessage:err.message
            })
        })
})
//覆盖默认
XMLHttpRequest = engine;
axios.post("../package.json").then(log)

Давайте используем axios, чтобы инициировать запрос для его проверки:

axios.post("../package.json").then(log)

//控制台输出
> http://localhost:63341/Fly/package.json POST
> {data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}

Вы можете видеть, что запрошенный URL и метод выводятся в консоль, и наш перехват прошел успешно. И объект результата второй строки - axiosthenраспечатанный.

Поскольку Fly поддерживает переключение движков, мы можем сначала напрямую переключить движок fly на реальный.XMLHttpRequest, а потом перезаписать, чтобы сетевые запросы на лету были все через реалXMLHttpRequestЗапущено (фактически, движок fly по умолчанию в среде браузераXMLHttpRequest, вручную переключать не надо, здесь для наглядности, вручную переключается). fly автоматически синхронизирует заголовки запросов на основе объекта запроса. Если вы хотите заблокировать запрос, просто верните его в адаптере.

Другие методы перехвата

Автор когда-то написал библиотеку, посвященную перехвату ajax, адреса GithubAjax-hookОн также может перехватывать глобальные Ajax-запросы, разница в том, что он может перехватывать каждый шаг и каждый обратный вызов Ajax-запросов, что не только мощно, но и очень легко (1 КБ). По сравнению с описанным выше методом перехвата через движок fly, степень детализации перехвата Ajax-hook лучше, но Ajax-hook использует ES5.getter,setter, поэтому браузеры ниже IE9 не поддерживаются.

наконец

Fly — это просто открытый исходный код, если вы считаете, что это полезно для вас, добро пожаловать в звезду, спасибо за поддержку github:github.com/wendux/fly

fly.js
fly.js

Категории