Как использовать SwitchMap RxJs для не «Observable» функций и отменить предыдущий запрос?

Question

[Роман Ракзин]

Прочитав много документации я так и не разобрался с оператором SwitchMap.
Мне нужно отменять запрос, если он ещё не выполнен.
Но не всё так просто, как на форумах.
Пользователь выбирает категории продуктов и они подгружаются. Если же человек "клацает" часто, то предыдущие запросы нужно не считать.
Но я использую fetchApi, а не стандартный angularHttpClient и стоит вопрос отмены предыдущих запросов через такой вариант.

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

async selectCategory(id) {
    data = await myFuncGetDataFromServer(id){}
}

Как мне подобный запрос сделать со SwitchMap ? Либо через не RxJs, но что б предыдущие отменялись? (лучше бы конечно на Rxjs)

Спасибо.

Answer 1

[Антон Швец]

switchMap не отменяет никаких запросов. Он отписывается от потока.
А уже HttpClient так устроен, что отменяет запрос при отписке. Т.е. вызывает XMLHttpRequest.abort() когда срабатывает TearDown logic.

Если вы используете fetch, а не xhr, то его тоже можно завернуть в обсервабл. Что-то типа такого

function request(url) {
  return new Observable(observer => {
    const controller = new AbortController()
    const signal = controller.signal
    signal.addEventListener("abort", () => observer.complete());

    fetch(url, { signal  })
            .then(res => {
                observer.next(res);
                observer.complete();
              })
           .catch((err) => {
                observer.error(err);
                observer.complete();
            });

      return () => controller.abort();
  });
}

Писал по памяти, возможно это даже работает :)
При создании Observable переданный ему коллбэк возвращает логику, которая будет выполнена при отписке от него, т.е. teardown

Comments

[Антон Швец]

Эту шляпу выше нужно заменить на rxjs оператор fromFetch, все уже написано до нас.
Вот код https://github.com/ReactiveX/rxjs/blob/master/src/...