useRequest-Ant стандартные перехватчики запросов промежуточной станции

React.js

Документация по запросу:hooks.umijs.org/zh-CN/async

Адрес Umi Hooks на Github:github.com/umijs/hooks

useRequestЭто сверхмощный и хорошо продуманный хук сетевых запросов, который стал передовым встроенным решением сетевых запросов в Ant Zhongtai. UseRequest рекомендуется для написания сетевых запросов во внутренних приложениях среднего уровня ant.

useRequest, вероятно, является самым мощным и приземленным хуком запроса в сообществе. Он может охватывать 99% сценариев сетевых запросов, будь то чтение или запись, будь то обычный запрос или запрос на пейджинг, будь то кеширование или регулирование с защитой от сотрясений, все они могут поддерживаться. Только не придумаешь, без этого не обойтись (хвастовство 🐂~).

Зачем использовать запрос?

При разработке компонентов реализовать надежный сетевой запрос непросто. Как и моя предыдущая статья "Umi Hooks — помогите освоить React Hooks«Например, для реализации сетевого запроса нам необходимо учитывать такие аспекты, как загрузка, обработка гонки, выгрузка компонентов и так далее.

Конечно, благодаря возможности инкапсуляции логики React Hooks мы можем инкапсулировать логику, связанную с сетевыми запросами. в Уми ХуксuseAsyncПосле этого одна строка кода может реализовать сетевые запросы, и повышение эффективности становится очевидным.

Но в повседневной работе одного только useAsync недостаточно, в Umi Hooks много хуков, связанных с сетевыми запросами. Например, связанные с пейджинговыми запросамиusePagination, запросите встроенный стабилизаторuseSearch, Встроенный UMI-ЗАПРОСuseAPI, что загружает больше сценuseLoadMore,И т.д., и т.д.

У существующих хуков есть несколько очевидных недостатков:

  • Стоимость начала работы высока, и для разных сценариев необходимо выбирать разные хуки.
  • Все сетевые запросы Hooks API, базовые возможности несовместимы. Например, usePagination не поддерживает ручной запуск, опрос и т. д.
  • Возможности useAsync недостаточно, и многие сценарии не соответствуют требованиям, например, параллельные запросы.

Одновременно сzeit/swrРождение , дало нам много вдохновения, оказывается, сетевые запросы еще можно так играть! swr имеет так много полезных и неожиданных возможностей. Например:

Здесь я просто популяризирую swr. скоростьstale-while-revalidateКороче говоря, самая важная способность: когда мы инициируем сетевые запросы, приоритет будет возвращать кэшированные данные ранее, затем инициировать новые сетевые запросы в фоновом режиме, окончательный результат с новым запросом на повторную визуализацию триггерной сборки. swr характеристики конкретной сцены, очень удобный.

Основываясь на двух вышеперечисленных пунктах, после долгих внутренних дискуссий мы, наконец, решили, что нам нужно сделать мощные хуки сетевых запросов, охватывающие все сценарии! Родился useRequest! Он не только включает в себя возможности всех хуков, связанных с сетевыми запросами, в текущих хуках Umi, но и многое заимствует из отличных возможностей swr, что очень благоухает.

Введение способности

базовый сетевой запрос

import { useRequest } from '@umijs/hooks';

function getUsername() {
  return Promise.resolve('jack');
}

export default () => {
  const { data, error, loading } = useRequest(getUsername)
  
  if (error) return <div>failed to load</div>
  if (loading) return <div>loading...</div>
  return <div>Username: {data}</div>
}

Это простейший пример сетевого запроса. В этом примереuseRequestПолучает функцию Promise. Когда компонент инициализируется, он автоматически запускаетgetUsernameВыполнять и управлять автоматическиdata,loading,errorВ ожидании данных нам нужно только написать соответствующую реализацию пользовательского интерфейса в соответствии с состоянием.

онлайн демо

ручной запрос

Для запросов «на запись» нам обычно нужно запускать вручную, например, добавлять пользователей, редактировать информацию, удалять пользователей и т. д.useRequestПросто нужно настроитьmanual = trueчтобы предотвратить выполнение инициализации. только триггерrunначнет выполняться.

2020-02-13 20.43.15.gif

import { useRequest } from '@umijs/hooks';

export default () => {
  const { run, loading } = useRequest(changeUsername, {manual: true})
  
  return (
    <Button onClick={() => run('new name')} loading={loading}>
       Edit
    </Button>
    )
}

онлайн демо

голосование

Для данных, которые необходимо поддерживать в актуальном состоянии, нам обычно необходимо постоянно инициировать сетевые запросы для обновления данных.useRequestПросто настройтеpoilingIntervalВы можете автоматически инициировать сетевые запросы через регулярные промежутки времени.

import { useRequest } from '@umijs/hooks';

export default () => {
  const { data } = useRequest(getUsername, { pollingInterval: 1000 })

  return <div>Username: {data}</div>
}

При этом, установивpollingWhenHidden, мы можем разумно приостановить опрос, когда экран скрыт. Продолжите запрос, когда экран снова станет видимым, чтобы сэкономить ресурсы.

Конечно, вы также можетеrun/cancelдля ручного включения и выключения таймера.

онлайн демо

параллельный запрос

Что такое параллельный запрос? Из следующего рисунка должно быть понятно, то есть для одного и того же интерфейса нам нужно поддерживать несколько состояний запроса.

Параллельные запросы в примере имеют несколько характеристик:

  • Удаление n отдельных пользователей требует сохранения n состояний запроса.
  • Если вы удаляете одного и того же пользователя несколько раз, вам нужно сохранить только последний запрос.

2020-02-13 21.03.55.gif

useRequestустановивfetchKey, чтобы классифицировать запрос. Для запросов одной категории поддерживается только одно состояние. Запросы разных категорий будут иметь несколько статусов. В приведенном ниже коде мы передаемuserIdКатегоризировать запрос, и мы можем передатьfetches[userId]Получите статус запроса текущей категории!

export default () => {
  const { run, fetches } = useRequest(deleteUser, {
    manual: true,
    fetchKey: id => id, // 不同的 ID，分类不同
  });

  return (
    <div>
      <Button loading={fetches.A?.loading} onClick={() => { run('A') }}>删除 1</Button>
      <Button loading={fetches.B?.loading} onClick={() => { run('B') }}>删除 2</Button>
      <Button loading={fetches.C?.loading} onClick={() => { run('C') }}>删除 3</Button>
    </div>
  );
};

онлайн демо

Стабилизатор и дросселирование

Обычно в сцене поиска при вводе мы будем использовать функцию защиты от сотрясений, чтобы сохранить ненужные сетевые запросы. пройти черезuseRequest, нужно только настроитьdebounceInterval, операцию регулирования сетевых запросов можно реализовать очень просто.

2020-02-13 21.24.40.gif

В следующем примере, независимо от того, сколько раз он вызываетсяrun, запрос будет отправлен только один раз после остановки ввода.

import { useRequest } from '@umijs/hooks';

export default () => {
  const { data, loading, run, cancel } = useRequest(getEmail, {
    debounceInterval: 500,
    manual: true
  });

  return (
    <div>
      <Select onSearch={run} loading={loading}>
        {data && data.map(i => <Option key={i} value={i}>{i}</Option>)}
      </Select>
    </div>
  );
};

Троттлинг и защита от сотрясений одинаковы, просто нужно настроитьthrottleInterval, функция дросселирования может быть реализована.

онлайн демо

Кэш, SWR и предварительная загрузка

Я уже говорил о том, что такое SWR. В сценарии SWR мы будем кэшировать данные интерфейса. Когда мы будем запрашивать интерфейс в следующий раз, мы сначала вернем кэшированные данные. В то же время мы инициируем новый сетевой запрос за сцены и дождаться новых данных, после чего повторно запустить рендеринг.

Для некоторых интерфейсов, данные которых не меняются часто, использование SWR может значительно улучшить взаимодействие с пользователем. Например, в приведенном ниже примере изображения, когда мы обращаемся к статье во второй раз, кэшированные данные возвращаются напрямую без какого-либо времени ожидания. В то же время мы видим, что «Время последнего доступа» обновляется через 2 секунды, что означает, что возвращаются новые данные запроса.

2020-02-13 21.58.31.gif

useRequestНастроитьcacheKey, вы можете войти в режим КСВ, что довольно просто.

  const { data, loading } = useRequest(getArticle, {
    cacheKey: 'articleKey',
  });

В то же время следует отметить, что тот жеcacheyKeyДанные распределяются по всему миру. Благодаря этой функции мы можем реализовать функцию «предварительной загрузки». например мышьhoverКогда заголовок статьи достигнут, мы отправляем запрос на чтение деталей статьи, чтобы, когда пользователь фактически нажимал на статью, данные уже были кэшированы.

онлайн демо

Повторный запрос фокуса экрана

по конфигурацииrefreshOnWindowFocus, мы можем реализовать, что когда экран перефокусирован или виден, сетевой запрос инициируется повторно. Какая польза от этой функции? Это может обеспечить синхронизацию данных между несколькими вкладками. Это также может решить проблему актуальности данных, связанную с повторным открытием веб-сайта после длительного перерыва.

взять здесьswrсхему, иллюстрирующую проблему.

2020-02-13 22.12.25.gif

онлайн демо

Интегрированная библиотека запросов

Учитывая простоту использования,useRequestИнтегрированныйumi-request.如果第一个参数不是 Promise，我们会通过umi-requestинициировать сетевой запрос.

Конечно, если вы хотите использоватьaxios, так же можно пройтиrequstMethodВы можете настроить свой собственный метод запроса.

// 用法 1
const { data, error, loading } = useRequest('/api/userInfo');

// 用法 2
const { data, error, loading } = useRequest({
  url: '/api/changeUsername',
  method: 'post',
});

// 用法 3
const { data, error, loading } = useRequest((userId)=> `/api/userInfo/${userId}`);

// 用法 4
const { loading, run } = useRequest((username) => ({
  url: '/api/changeUsername',
  method: 'post',
  data: { username },
}));

онлайн демо

нумерация страниц

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

  • страница, размер страницы, общее управление
  • Изменение условий фильтрации, сброс пейджинга и повторная инициация сетевых запросов

useRequestпо конфигурацииpaginated = true, вы можете войти в режим пейджинга и автоматически обрабатывать общую логику таблицы.antd TableПри специальной поддержке всего несколькими строками кода можно реализовать сложную логику, показанную на рисунке ниже, что в сто раз эффективнее.

2020-02-13 22.34.40.gif

import {useRequest} from '@umijs/hooks';

export default () => {
  const [gender, setGender] = useState('male');
  const { tableProps } = useRequest((params)=>{
    return getTableData({...params, gender})
  }, {
    paginated: true,
    refreshDeps: [gender]
  });

  const columns = [];

  return (
    <Table columns={columns} rowKey="email" {...tableProps}/>
  );
};

онлайн демо

Загрузи больше

Загрузка большего количества сцен также является обычным требованием при ежедневной разработке. В сцене загрузки нам обычно приходится иметь дело с:

  • Смещение страницы, pageSize и другое управление
  • Первая загрузка, загрузка больше управления состоянием
  • Потяните вверх, чтобы автоматически загрузить больше
  • Когда компонент загружается во второй раз, я надеюсь записать предыдущие данные и прокрутить до предыдущей позиции

useRequestустановивloadMore = true, вы можете войти в режим загрузки больше, а с другими параметрами вы можете обрабатывать всю вышеперечисленную логику за вас.

2020-02-13 22.46.16.gif

const { data, loading, loadMore, loadingMore } = useRequest((d) => getLoadMoreList(d?.nextId, 3), {
  loadMore: true,
  cacheKey: 'loadMoreDemoCacheId',
  fetchKey: d => `${d?.nextId}-`,
});

онлайн демо

Более

Конечно, я сказал это раньше,useReqeustФункция — это только то, о чем вы не можете думать без нее. хахаха~

В дополнение к вышеперечисленным функциям у нас также есть некоторые другие возможности, которые можно использовать вДокументациянайти в. НапримерloadingDelay.

loadingDelay

установивloadingDelay,Задерживатьloadingсталиtrueвремя, которого можно эффективно избежать, если на запрос ответят быстроloadingдрожание, вызванное изменениями.

2020-02-13 22.49.43.gif

Суммировать

несмотря на то чтоuseRequestЕсть много функций, и неизбежно, что некоторые функции, которые вы хотите использовать, не поддерживаются. Но не волнуйтесь, вы можете основатьuseRequestрасширять. Наш режим подкачки и дополнительные режимы загрузки реализованы на основе расширения базовых возможностей. Вы можете обратиться к их коду, чтобы реализовать свои собственные уникальные возможности.

пройти черезuseRequest, который может решить 99% ежедневных потребностей в сетевых запросах. Оля, дай! Оля, дай!

Прием на работу

Наконец, сделайте объявление о работе.Технологический отдел Ant Gold Service ExperienceНабор передний конец это! Требования P6 и выше! Заинтересованные студенты могут отправить свое резюме по адресу

brickspert.fjl@antfin.com

brickspert.fjl@antfin.com

brickspert.fjl@antfin.com

Я помогу вам следить за ходом интервью, и я с нетерпением жду вашего участия~

Категории