Введение
Недавно во время преподавания я начал составлять список «повседневных» действий, которыми занимается React-разработчик. Одним из распространенных действий является интеграция компонента с api. Это заключается в выполнении запроса к внешнему api и отображении данных. В качестве бонуса я бы добавил элемент для взаимодействия и изменения параметров, отправляемых на этот api.
Исходя из этого, в данной статье мы рассмотрим простой пошаговый план, который можно повторять для ежедневной практики в рамках подготовки к работе в качестве разработчика React.
Получение api
Первым шагом будет выбор api и предварительный просмотр его содержимого.
Чтобы выбрать api для практики, я бы рекомендовал этот список публичных api на Github.
https://github.com/public-api-lists/public-api-lists
Предварительный просмотр api
Следующим шагом будет предварительный просмотр api. Для этого примера мы будем использовать апи Meowfacts: https://github.com/wh-iterabb-it/meowfacts.
При предварительном просмотре api мы можем делать GET-запросы в браузере или использовать что-то вроде Hopscotch.io или Postman. (Я использую hopscotch, поскольку он с открытым исходным кодом).
На странице github есть одна ссылка: https://meowfacts.herokuapp.com/, поэтому, открыв ее в браузере, мы увидим следующее.
А в Hopscotch мы также делаем GET-запрос.
Настройка React
Если у вас еще нет установленного приложения react, давайте создадим его. В вашей обычной рабочей среде оно будет создано за вас.
npx create-react-app api-example
Теперь установите и запустите приложение.
cd api-example
npm start
Жестко закодируйте ответ
Порядок не обязательно имеет значение, но для следующего шага мне нравится добавлять жестко закодированный ответ, а затем макетировать пользовательский интерфейс вокруг него. В качестве примера ответа, взятого из Hopscotch, мы можем использовать следующее.
{
"data": [
"There are cats who have survived falls from over 32 stories (320 meters) onto concrete."
]
}
Откройте компонент. Если вы следите за развитием событий, откройте App.js. Давайте добавим ответ как жестко закодированную переменную внутри компонента App. Я также удалил часть шаблонного html.
function App() {
const catResponse = {
data: [
"There are cats who have survived falls from over 32 stories (320 meters) onto concrete."
]
}
return (
<div className="App">
</div>
);
}
Теперь мы можем использовать переменную для отображения ответа. Для этого мы можем использовать простой элемент неупорядоченного списка. Мы также будем использовать блок кода React {} для интерполяции нашей переменной в html.
function App() {
const catResponse = {
data: [
"There are cats who have survived falls from over 32 stories (320 meters) onto concrete."
]
}
return (
<div className="App">
<ul>
<li>{catResponse.data[0]}</li>
</ul>
</div>
);
}
Пока все хорошо, но давайте сделаем еще один шаг вперед. Свойство data является массивом, поэтому мы можем ожидать, что в этом массиве будет больше фактов. Поэтому давайте преобразуем наш html, чтобы использовать map для отображения наших списков. Обратите внимание, что я оставляю подробный синтаксис, чтобы новичкам в js было легче читать.
function App() {
const catResponse = {
data: [
"There are cats who have survived falls from over 32 stories (320 meters) onto concrete."
]
}
return (
<div className="App">
<ul>
{catResponse.data.map((fact) => {
return (
<li>{fact}</li>
)
})}
</ul>
</div>
);
}
Преобразование ответа в состояние
Теперь, когда мы отображаем ответ, мы хотим преобразовать его в переменную состояния. В конце концов, мы сделаем запрос и обновим нашу переменную. Для этого нам нужно добавить хук useState.
Новая строка кода выглядит следующим образом:
const [catResponse, setCatReaspon] = useState({})
Здесь мы вызываем функцию React useState и передаем пустой объект в качестве начального состояния. UseState вернет массив, первый элемент которого будет состоянием, а второй — функцией для изменения состояния. Таким образом, catResponse будет пустым.
Чтобы сделать это немного лучше, мы можем использовать наш жестко закодированный ответ в качестве начального состояния. Мы можем переместить ответ из компонента и переименовать его в initialState, а затем передать его в функцию useState. Тогда, когда пользователь загрузит страницу, он увидит факт, пока ждет api вызова. Окончательный код выглядит следующим образом.
import { useState } from 'react';
import './App.css';
const initialCatResponse = {
data: [
"There are cats who have survived falls from over 32 stories (320 meters) onto concrete."
]
}
function App() {
const [catResponse, setCatResponse] = useState(initialCatResponse)
return (
<div className="App">
<ul>
{catResponse.data.map((fact) => {
return (
<li>{fact}</li>
)
})}
</ul>
</div>
);
}
export default App;
Выполнить вызов api
Теперь мы можем перейти к выполнению api запроса. Для этого мы будем использовать fetch api. Ниже приведена функция, которую мы будем использовать для выполнения GET-запроса к MeowFacts. Если вы не знакомы с fetch api, читайте здесь: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch.
async function getMeowFacts() {
const response = await fetch('https://meowfacts.herokuapp.com/')
const data = await response.json()
return data;
}
Обновление состояния
И наконец, мы можем получить ответ и обновить состояние. Для этого мы воспользуемся хуком useEffect, который позволяет использовать «побочные эффекты» в нашем приложении. Обычно он используется при рендеринге компонентов для загрузки api данных. Некоторые примеры в w3schools являются хорошим объяснением: https://www.w3schools.com/react/react_useeffect.asp.
Мы будем использовать useEffect без зависимостей для однократной загрузки и вызова нашей функции getMeowFacts. Мы также ожидаем обещание, используя синтаксис then, поскольку React рекомендует useEffect быть синхронным. Наконец, мы вызываем метод setCatReason из useState, чтобы обновить наш ответ. Результат следующий.
useEffect(() => {
getMeowFacts().then((meowFactData) => {
setCatReason(meowFactData)
})
}, [])
Окончательный код
Окончательный код выглядит следующим образом, который станет привычной настройкой в вашей повседневной разработке React.
import { useState, useEffect } from 'react';
import './App.css';
const initialCatResponse = {
data: [
"There are cats who have survived falls from over 32 stories (320 meters) onto concrete."
]
}
async function getMeowFacts() {
const response = await fetch('https://meowfacts.herokuapp.com/')
const data = await response.json()
return data;
}
function App() {
const [catResponse, setCatReason] = useState(initialCatResponse)
useEffect(() => {
getMeowFacts().then((meowFactData) => {
setCatReason(meowFactData)
})
}, [])
return (
<div className="App">
<h1>Meow Facts</h1>
<ul>
{catResponse.data.map((fact) => {
return (
<li>{fact}</li>
)
})}
</ul>
</div>
);
}
export default App;
Веб-страница выглядит довольно голой, но стилизация — это отдельная статья.