Обнаружить запрос API выборки на веб-странице в JavaScript

Задний план: Я работаю с Shopify ScriptTag, который позволяет мне добавлять файл JavaScript на витрину магазина. Все, что у меня есть, это файл сценария.

Текущее поведение: Существует опция "Купить сейчас", которая позволяет покупателям оформлять заказ напрямую, пропуская Добавить в корзину. Когда они нажимают на Купить сейчас, Shopify отправляет POST-запрос принести() на кассы.json для создания оформления заказа.

Проблема: Мне нужно определить, что этот "запрос на выборку произошел" в моем собственном файле JavaScript.

self.addEventListener('fetch', event => {
    console.info("event happened");
});

Я пробовал Получить API событий, но, похоже, он работает только в области Сервисный работник.

Есть ли возможность обнаружить это?

Например, мы можем обнаружить XMLHttpRequest, переопределив его метод открыть, используя прототипное наследование.

Что вы подразумеваете под "обнаружить"? Код, который вы контролируете, делает запрос, верно?

— 22.02.2019 05:34

Я не могу контролировать поведение при отправке запроса. Это происходит на той же странице, и мой скрипт тоже там. Могу ли я обнаружить, что «запрос произошел»?

— 22.02.2019 05:35

Есть ли <iframe> элементы в HTML document? Код, который делает запрос, находится в <iframe> и, или ваш код в <iframe> в HTML document?

— 22.02.2019 05:36

Неа. Пока нет фреймов. Это еще один файл сценария от Shopify (vendor), который делает этот запрос.

— 22.02.2019 05:39

См. Обозреватель производительности;

— 22.02.2019 05:53

да. В настоящее время я смотрю на ваше решение.

— 22.02.2019 05:54

См. фрагменты стека и значение, напечатанное в console в этом отвечать на вопрос Получить фактический URL изображения после перенаправления. См. также Обработка <?xml-stylesheet> аналогична <link rel = "stylesheet">?

— 22.02.2019 06:05

javascript fetch fetch-api

22.02.2019 05:30

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

3 359

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Да, вы можете перезаписать window.fetch своей собственной функцией, которая вызывает исходную window.fetch после (или до) запуска вашего собственного кода:

const nativeFetch = window.fetch;
window.fetch = function(...args) {
  console.info('detected fetch call');
  return nativeFetch.apply(window, args);
}

fetch('https://cors-anywhere.herokuapp.com/')
  .then(res => res.text())
  .then(text => console.info(text.split('\n')[0]));

Не знал, что оператор распространения может помещать аргументы в такие массивы, аккуратно.

— 22.02.2019 05:37

22.02.2019 05:35

const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    if (entry.initiatorType === "fetch") {
      console.info('Fetch request detected to', entry.name);
    }
  }
});

observer.observe({
  entryTypes: ["resource"]
});

fetch('https://cors-anywhere.herokuapp.com/')
  .then(res => res.text())
  .then(text => console.info(text.split('\n')[0]));

Использование Наблюдатель за производительностью. Спасибо @guest271314.

Этот ответ следует предпочесть принятому в настоящее время ответу на перезапись window.fetch.

— 25.04.2021 07:53

22.02.2019 06:01