Как перезапустить запрос API извлечения после прерывания использования AbortController

Я работаю над приложением для приема заказов на вынос (с использованием woocommerce API), где заказ будет получен мгновенно. Я создал простую панель инструментов, где отображаются все заказы и получаются новые заказы с помощью API выборки с setinterval.

поэтому, когда пользователь нажимает на заказ, они получают его на панели управления. Появится всплывающее окно модели, где пользователь управляет заказом. но из-за setinterval (для 5s) Модель исчезает, чтобы решить эту проблему, я использую технику для очистки интервала, поэтому, когда пользователь нажимает на очищенный интервал заказа, он не будет запрашивать дальнейшие запросы, пока пользователь не установит порядок в поле Model и не нажмет сохранить кнопка, при сохранении я снова вызываю функцию setinterval

но в этом методе возникает проблема: если setinterval будет выполняться, и пользователь щелкнет по порядку, и поскольку выборка уже запущена и все заказы обновлены, модель исчезнет. поэтому мне нужно снова щелкнуть заказ (см. рисунок) https://postimg.cc/H8267CGd

Итак, я использую AbortController Api, он работает именно так, как я хочу.

AbortController, чтобы прервать запрос асинхронной выборки, после того, как я прервал запрос выборки, он не будет запускаться снова и вместо того, чтобы сообщать об ошибке, операция прервана (Uncaught (в обещании) DOMException: операция была прервана).

Короче говоря, как я могу снова перезапустить запрос API извлечения с помощью AbortController

const controller = new AbortController();
const signal = controller.signal;

function gettingOrders(){

var refreshInterval = setInterval(async function(){

const response = await fetch('index.php',{
    method: "GET",
    signal: signal,
    headers : { 
      'Content-Type': 'text/html',
      'Accept': 'text/html'
   }});
   try {

    const html = await response.text();
    var parser = new DOMParser();
    var doc = parser.parseFromString(html, "text/html");
    var div = doc.getElementById('newOrder').innerHTML;
    document.getElementById('newOrder').innerHTML = div;
   }
   catch(err) {
    console.log('error: ', err);
  }
     
  }, 5000);
  }

  gettingOrders();

  var sinterval = refreshInterval;
  sessionStorage.setItem("sinterval", sinterval);

  function abortFetching() {
  console.log('Now aborting');
  controller.abort();
  }

javascript async-await fetch setinterval abort
person user1781038    schedule 29.01.2021    source источник
comment
Я действительно застрял на этой проблеме, и я был бы признателен Anyhelp   -  person user1781038    schedule 30.01.2021

Ответы (1)


arrow_upward
3
arrow_downward

AbortController потребляется после прерывания. Вы должны создавать новый экземпляр при каждом вызове. Пример кода:

let controller;
let refreshInterval;

function getOrders(){
  refreshInterval = setInterval(async function() {
    controller = new AbortController();
    const signal = controller.signal;
    try {
      const response = await fetch('index.php',{
        method: "GET",
        signal: signal,
        headers : { 
          'Content-Type': 'text/html',
          'Accept': 'text/html'
        }
      });
      const html = await response.text();
      var parser = new DOMParser();
      var doc = parser.parseFromString(html, "text/html");
      var div = doc.getElementById('newOrder').innerHTML;
      document.getElementById('newOrder').innerHTML = div;
    }
    catch(err) {
      console.log('error: ', err);
    }
  }, 5000);
}

function abortFetching() {
  console.log('Now aborting');
  clearInterval(refreshInterval); // else it aborts only current fetch
  controller.abort();
}

getOrders();

const sinterval = refreshInterval;
sessionStorage.setItem("sinterval", sinterval);
person bigless    schedule 30.01.2021
comment
Спасибо, Bigless, я изучаю это, но без setInterval не знаю, как обойти - person user1781038; 30.01.2021
comment
@ user1781038 ах. я понял ... я подумал, что вы хотите повторить ошибочную выборку .. - person bigless; 30.01.2021
comment
Мне нужно проверять частые заказы, поэтому я использую setinterval - person user1781038; 30.01.2021
comment
отлично, теперь он работает. спасибо большое. вы сэкономите мне массу времени. ваше здоровье - person user1781038; 30.01.2021