Повечето от приложенията, които създаваме днес, консумират данни от външни източници чрез API. Те извличат данни от сървър и ги показват в потребителския си интерфейс.

Използвайки React, можете да създадете персонализирана кука за извличане на данни от API. При даден URL адрес тази кука ще върне обект, съдържащ данните и незадължително съобщение за грешка. След това можете да използвате тази кука в компонент.

Създаване на потребителски React Hook

Започнете със създаване на нов файл, наречен useFetch.js. В този файл създайте функция, наречена useFetch(), която приема URL низ като параметър.

конст useFetch = (url) => {
}

Куката трябва направете извикване на API веднага след извикването му. Можете да използвате useEffect() кука за това.

За действителните извиквания на API използвайте API за извличане. Този API е интерфейс, базиран на обещания, който ви позволява да правите заявки и да получавате отговори през HTTP асинхронно.

В персонализираната кука useFetch() добавете следното.

импортиране {useEffect, useState} 





instagram viewer


от "реагира";
конст useFetch = (url) => {
конст [данни, setdata] = useState(нула);
конст [зареждане, зареждане] = useState(вярно);
 const [грешка, seterror] = useState("");


useEffect(() => {
 извличане (url)
 .then((res) => res.json())
 .then((данни) => {
seterror(данни.грешка)
setdata(данни.шегувам се)
 setloading(невярно)
 })
 }, [url]);


връщане { данни, зареждане, грешка };
};
износпо подразбиране useFetch;

В тази кука вие първо инициализирате състоянието на три стойности:

  • данни: Съдържа отговора на API.
  • грешка: Съдържа съобщение за грешка, ако възникне грешка.
  • зареждане: Съдържа булева стойност, която показва дали е извлякъл API данните. Инициализирайте състоянието на зареждане на true. След като API върне данни, задайте го на false.

Куката useEffect() приема URL низа като аргумент. Това е, за да се гарантира, че работи всеки път, когато URL адресът се промени.

Функцията useFetch() ще върне обект, съдържащ данните, стойностите за зареждане и грешки.

Използване на персонализирана кука на React

За да използвате потребителската кука useFetch(), която току-що създадохте, започнете с импортирането й:

конст useFetch = изискват("./useFetch")

След това го използвайте, както следва:

конст {данни, зареждане, грешка} = useFetch (url)

За да демонстрирате, разгледайте следния компонент Вицове:

конст Вицове = () => {
 const url = "<https://sv443.net/jokeapi/v2/joke/Programming? тип=единичен>";
конст {данни, зареждане, грешка} = useFetch (url);
ако (Зареждане) връщане (
<див>Зареждане...</div>
 )


връщане (
<див>
 {грешка &&<див>{грешка}</div>}
 {данни &&<див>{<див>{данни}</div>}</div>}
</div>
 );
};
износпо подразбиране Вицове;

Той извиква куката useFetch() с URL адреса към приложния програмен интерфейс (API) за шеги и получава данните, стойностите за зареждане и грешки.

За да изобразите компонента Jokes, първо проверете дали Loading е true. Ако е така, покажете оператор „Зареждане…“, в противен случай изобразете данните и съобщението за грешка, ако има такова.

Защо да използвате потребителски React Hooks?

Точно както сте използвали персонализираната кука useFetch() в този компонент, можете да я използвате отново в други компоненти. Това е красотата на екстернализиране на логиката в куките, вместо да я записвате във всеки компонент.

Куките са мощна функция на React, която можете да използвате, за да подобрите модулността на вашия код.