API композиции Vue для победы!
Сегодня мы рассмотрим, как создать собственный хук в Vue.js. Для этой цели мы создадим простой хук useFetch, который мы сможем повторно использовать в наших компонентах. Мне нравится API композиции в Vue 3. Особенно теперь, когда настройка сценария позволяет нам использовать все, что вы определяете, это просто имеет смысл.
Я работал с React и люблю его, эта новая разработка в Vue.js действительно выравнивает для меня игровое поле.
Я хотел бы провести вас через это шаг за шагом, так что начнем:
Мы начнем с создания нашей функции useFetch, так как это хук, мы начнем имя нашей функции с «use», как того требует соглашение. Затем мы решаем, какие данные мы хотим получить, когда мы вызываем наш хук useFetch и сохраняем его в объекте состояния. Когда мы вызываем нашу функцию, мы хотим знать, загружается она или нет, выдала ли она ошибку, и если да, то мы хотели бы получить сообщение об ошибке. Наконец, нам нужны данные, возвращаемые вызовом.
Мы делаем наш объект состояния реактивным, потому что мы будем изменять эти значения во время выборки, и мы хотим, чтобы наше состояние прослушивало эти изменения. Мы также могли бы создать отдельные ссылки для каждого из наших элементов реактивного состояния, но, поскольку все они хорошо группируются вместе, я думаю, что реактивный объект более подходит и удобочитаем.
В конце хука useFetch мы возвращаем наше состояние с помощью оператора распространения и функции toRefs. Функция toRefs позволяет нам деструктурировать свойства состояния без потери реактивности. Прежде чем мы продолжим, давайте правильно напечатаем наше состояние:
Прежде чем мы продолжим, мы добавим типы в наше состояние. Поскольку данные, которые мы будем возвращать, различаются для каждого вызова, для решения этой проблемы мы используем общий. Теперь, когда мы вызываем наш хук useFetch, мы можем передать возвращаемый тип наших данных. Давай продолжим:
Далее мы добавим функцию async, чтобы получить наши данные. Первое, что мы делаем, это устанавливаем для нашего состояния isLoading значение true, процесс начинается. Затем в блоке try мы устанавливаем константу с именем response и ожидаем выборки с url и (необязательно) параметрами. Обратите внимание, что мы добавили url и options в качестве параметров хука useFetch. Мы проверяем response.ok, потому что по умолчанию обработчик catch достигается только тогда, когда выборке не удается выполнить запрос. С проверкой response.ok мы заставляем другие ошибки также перемещаться в обработчик catch. Если ошибки нет, мы заполняем наши данные о состоянии с помощью response.json(). Если есть ошибка, мы устанавливаем для нашего состояния hasError значение true и добавляем сообщение об ошибке в наше состояние errorMessage. Наконец, мы возвращаем нашему состоянию isLoading значение false. Давайте доработаем наш хук:
Последнее, что нам нужно сделать, это вызвать нашу функцию fetchData. Мы ждем результата, поэтому наша функция useFetch должна быть асинхронной. После этого наш хук useFetch готов к использованию. 🎉
Вы можете очень легко использовать наш новый хук в (асинхронной) функции. Если вы хотите получать и использовать данные непосредственно в своем компоненте, есть больше вариантов реализации. Это связано с тем, что ожидание верхнего уровня в настройке скрипта должно использоваться в сочетании с приостановкой, которая все еще является экспериментальной функцией. Чтобы избежать экспериментальной функции, мы можем использовать хук жизненного цикла onBeforeMount, создать асинхронную функцию и вызвать ее сразу или использовать .then и установить там данные. В будущем, я уверен, у нас будет одно оптимальное решение.
А пока я хочу показать вам один (урезанный) вариант реализации нашего хука useFetch и немедленного отображения данных в нашем компоненте.
Мы могли бы добавить кэширование или возможность отмены запросов в наш хук useFetch, но я надеюсь, что этот пост предоставил вам всю информацию, необходимую для создания ваших собственных пользовательских хуков Vue. В заключение, я надеюсь, что это зацепит вас за крючки.
Дополнительные материалы на PlainEnglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter и LinkedIn. Присоединяйтесь к нашему сообществу Discord.
