Већина апликација које данас креирамо користе податке из спољних извора преко АПИ-ја. Они преузимају податке са сервера и приказују их у свом корисничком интерфејсу.

Користећи Реацт, можете креирати прилагођену куку за преузимање података из АПИ-ја. Уз УРЛ, ова кука ће вратити објекат који садржи податке и опциону поруку о грешци. Затим можете користити ову куку у компоненти.

Креирање прилагођене Реацт Хоок

Започните креирањем нове датотеке под називом усеФетцх.јс. У овој датотеци направите функцију која се зове усеФетцх() која прихвата УРЛ стринг као параметар.

конст усеФетцх = (урл) => {
}

Удица би требала упутите АПИ позив одмах након што се позове. Можете користити усеЕффецт() кука за ово.

За стварне АПИ позиве, користите АПИ за преузимање. Овај АПИ је интерфејс заснован на обећањима који вам омогућава да асинхроно шаљете захтеве и примате одговоре преко ХТТП-а.

У прилагођену куку усеФетцх() додајте следеће.

увоз { усеЕффецт, усеСтате } из "реаговати";
конст усеФетцх = (урл) => {
конст [подаци, сетдата] = усеСтате(





instagram viewer

нула);
конст [лоадинг, сетлоадинг] = усеСтате(истинито);
 цонст [грешка, сетеррор] = усеСтате("");


усеЕффецт(() => {
 преузети (урл)
 .онда((рес) => рес.јсон())
 .онда((подаци) => {
сетеррор(података.еррор)
сетдата(података.шала)
 сетлоадинг(лажно)
 })
 }, [урл]);


повратак { подаци, учитавање, грешка };
};
извозУобичајено усеФетцх;

У овој куки прво иницијализујете стање три вредности:

  • подаци: Садржи АПИ одговор.
  • грешка: Садржи поруку о грешци ако дође до грешке.
  • лоадинг: Садржи логичку вредност која показује да ли је преузела АПИ податке. Иницијализирајте стање учитавања на труе. Када АПИ врати податке, поставите их на нетачно.

УсеЕффецт() кука узима УРЛ стринг као аргумент. Ово је да би се осигурало да се покреће сваки пут када се УРЛ промени.

Функција усеФетцх() ће вратити објекат који садржи податке, учитавање и вредности грешке.

Коришћење Реацт прилагођене куке

Да бисте користили усеФетцх() прилагођену куку коју сте управо креирали, почните тако што ћете је увести:

конст усеФетцх = захтевају(./усеФетцх")

Затим га користите на следећи начин:

конст {подаци, учитавање, грешка} = усеФетцх (урл)

Да бисте демонстрирали, размотрите следећу компоненту Шале:

конст Шале = () => {
 цонст урл = "<https://sv443.net/jokeapi/v2/joke/Programming? типе=сингле>";
конст { дата, лоадинг, еррор } = усеФетцх (урл);
ако (учитавање) повратак (
<див>Учитавање...</div>
 )


повратак (
<див>
 {грешка &&<див>{еррор}</div>}
 {подаци &&<див>{<див>{подаци}</div>}</div>}
</div>
 );
};
извозУобичајено Јокес;

Позива усеФетцх() куку са УРЛ-ом до АПИ-ја шала и прима податке, учитавање и вредности грешке.

Да бисте приказали компоненту Јокес, прво проверите да ли је Лоадинг тачно. Ако јесте, прикажите наредбу „Учитавање…“, иначе прикажите податке и поруку о грешци ако их има.

Зашто користити Цустом Реацт Хоокс?

Баш као што сте користили прилагођену куку усеФетцх() у овој компоненти, можете је поново користити у другим компонентама. То је лепота екстернализације логике у кукицама уместо да је уписујете у сваку компоненту.

Хоокс су моћна карактеристика Реацт-а коју можете користити да побољшате модуларност свог кода.