SWR - это библиотека React Hooks для извлечения данных.
Название « SWR » получено из stale-while-revalidate , стратегии недействительной кэша, популярной HTTP RFC 5861. SWR сначала возвращает данные из Cache (Stail), затем отправляет запрос (Revalidate) и, наконец, снова поставляется с актуальными данными.
Только с одним крюком вы можете значительно упростить логику извлечения данных в вашем проекте. И это также рассказано во всех аспектах скорости, правильности и стабильности, чтобы помочь вам построить лучший опыт:
... и многое другое.
С помощью SWR компоненты будут постоянно и автоматически получат поток обновлений данных . Таким образом, пользовательский интерфейс будет всегда быстрым и реактивным .
Просмотреть полную документацию и примеры на swr.vercel.app.
import useSWR from 'swr'
function Profile ( ) {
const { data , error , isLoading } = useSWR ( '/api/user' , fetcher )
if ( error ) return < div > failed to load </ div >
if ( isLoading ) return < div > loading... </ div >
return < div > hello { data . name } ! </ div >
} В этом примере React Hook useSWR , что PRESS принимает key и функцию fetcher . key является уникальным идентификатором запроса, обычно URL -адрес API. И fetcher принимает key в качестве своего параметра и возвращает данные асинхронно.
useSWR также возвращает 3 значения: data , isLoading и error . Когда запрос (выборка) еще не закончен, data будут undefined , а isLoading будет true . Когда мы получаем ответ, он устанавливает data и error на основе результата fetcher , isLoading на False и перенести компонент.
Обратите внимание, что fetcher может быть любой асинхронной функцией, вы можете использовать свою любимую библиотеку извлечения данных для обработки этой части.
Просмотреть полную документацию и примеры на swr.vercel.app.
Эта библиотека создана командой позади next.js, с вкладом нашего сообщества:
Участники
Спасибо Райану Чену за предоставление потрясающего названия пакета swr NPM!
Лицензия MIT.