Определить запрос API на веб-странице в JavaScript

Question

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

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

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

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

Я пытался Fetch Event API , но, похоже,работать только в Service Worker scope.

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

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

Answer 1

const observer = new PerformanceObserver((list, obj) => {
  for (let entry of list.getEntries()) {
    if(entry.initiatorType === "fetch"){

      if(entry.name.indexOf("checkouts.json") !== -1){

        alert("got you!")

      } 

    }
  }
});

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

Использование Performance Observer .Спасибо @ guest271314.

Answer 2

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

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

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