В предыдущем посте на Реквизит Мы Подержанные аксио обещает Чтобы запросить API GitHub:

import axios from 'axios';

function App() {
  const url = 'https://api.github.com/repos/axios/axios';

  return 

    
Axios
    
{
      axios.get(url).then(response => response.data.description)
    }
  
}

В этом посте мы улучшим наше приложение UX по:

• Добавление индикатора загрузки
• Отображение ошибки, если такое имеет место
• и мы избегаем мерцания на быстрых соединениях

Подготовка

Во-первых, давайте перейдем из на основе обещаний Axios к наблюдаемым на основе аксес-наблюдаемый (обертка вокруг первого):

import axiosObservable from 'axios-observable';

function App() {
  const url = 'https://api.github.com/repos/ReactiveX/rxjs';

  return 

    
RxJS
    
{
      axiosObservable.get(url).pipe(
        map(response => response.data.description)
      )
    }
  
}

Поведение остается прежним: что .then Сделал в обещаниях, теперь обрабатывается RXJS карта .

С наблюдателями, поддерживающими нашу мощь, мы добры к созданию чудес!

N.B.: Здесь есть скрытая выгода здесь! Помимо тонн операторов, доступных в RXJS, мы также получаем отдавление запроса на компонент ООН бесплатно!

Индикатор погрузки

Чтобы показать индикатор загрузки до нагрузки ответа – нам просто нужно сначала выделять:

  startWith(Loading...)

StartWith Оператор выделяет заданное значение и после этого будет продолжаться с остальными событиями. В нашем случае – мы выделяем элемент. Следующее значение на потоке заменит его.

Сделанный!

Обработка ошибок

Угадай, что? RX имеет оператор для этого тоже!

  catchError(() => of(Error!))

CatchError Оператор заменит событие ошибки на потоке с другим потоком. В нашем случае – мы выделяем Если ошибка брошена.

Сделанный!

Psst! Эй, хочу несколько операторов повторных ошибок? Или вы хотите узнать модульную технику повторной попытки? Проверьте мою статью ” Обработка ошибок в RXJS ” Подробнее!

Мерцание

Ну, это немного сложнее. Нам понадобится целые 3 строки:

zip(
  axiosObservable.request(url),
  timer(500),
  x => x
)

Zip ждать Axios.request и Таймер (500) Оба для излучения значения, а затем создаст комбинированный результат. х => х Функция необходима для игнорирования значения, испускаемой таймером, и принимать только ответ Axios.

Все вместе

Давайте повторимся, что мы написали:

function App() {
  const url = 'https://api.github.com/repos/ReactiveX/rxjs';

  return 

    
RxJS
    
{
      zip(
        axiosObservable.get(url),
        timer(500),
        x => x
      ).pipe(
        map(response => response.data.description),
        startWith(Loading...),
        catchError(() => of(Error!))
      )
    }
  
}

Разве это не так просто?!

Вот преимущества, которые мы достигли:

⭐️ Индикация загрузки, обработка ошибок, анти-мерцание через минуту ⭐️ Установленные обновления без состояния ⭐️ Автоматический запрос Аборт на разморьте ⭐️ Большая расширяемость с десятками операторов RXJS 🚀

Поделитесь своими мыслями в комментариях!

Попробовать реквизы 🐶

Клонировать шаблон репозитория:

git clone --depth=1 https://github.com/recksjs/recks-starter-project.git
cd recks-starter-project
npm i
npm start

Или использовать это онлайн песочница

Исходный код доступен в github.com/recksjs/recks.

Конец

Фото заголовка Митчелл Орр на Бессмысленно

Оригинал: “https://dev.to/kosich/truly-reactive-rx-jsx-experiment-29ph”