Когда использовать Fetch и Axios в своих приложениях?
Существуют различные способы использования REST API в React, но в этом блоге мы сосредоточимся на том, как мы можем использовать REST API, используя два самых популярных метода:
- Axios (HTTP-клиент на основе обещаний)
- Fetch API (встроенный в браузер веб-API).
Мы также обсудим версию Axiosс крючкамиaxios-hooks.
Во-первых, давайте создадим пример приложения React, чтобы продемонстрировать использование Rest API в приложении React.
Приложение может вызывать конечную точку, которая предоставляет случайную информацию о пользователе. На данный момент мы печатаем только полное имя и адрес электронной почты пользователя.
import React,{useEffect,useState} from "react";
const RenderUserInfo = (props) => {
const { name, email } = props;
return (
<div>
<p>Name: {name}</p>
<p>Email: {email}</p>
</div>
);
};
const UserList = () => {
const [userList,setUserList] = useState([])
const apiCall=()=>{
// API logic goes here
}
useEffect(()=>{
apiCall()
},[])
return (<div>
{userList.map((item, index) => (
<RenderUserInfo name={item.name} email={item.email} key={index} />
))}
</div>
);
};
export default function App() {
return (
<div className="App">
<h1>Hey there! hope this is fun :)</h1>
<UserList />
</div>
);
}
В приведенном выше коде часть пользовательского интерфейса готова, теперь нам нужно написать логику для вызова API и установить данные в userList. Давайте реализуем apiCall() функцию, используя как Fetch, так и Axios.
Получить
fetch() API — это встроенный метод JavaScript для получения ресурсов с сервера или конечной точки API. Он похож на XMLHttpRequest, но fetch API предоставляет более мощный и гибкий набор функций.
Он определяет такие понятия, как семантика CORS и заголовок источника HTTP, заменяя их отдельные определения в других местах.
Метод fetch() API всегда принимает обязательный аргумент, который представляет собой путь или URL-адрес ресурса, который вы хотите получить. Он возвращает обещание, указывающее на ответ на запрос, независимо от того, был ли запрос успешным или нет. Вы также можете дополнительно передать объект параметров инициализации в качестве второго аргумента.
После получения ответа существует несколько встроенных методов, позволяющих определить содержимое тела и способ его обработки.
const apiCall=()=>{
fetch("https://randomuser.me/api/?results=20")
.then((response) => response.json())
.then((dataArr) => {
setUserList(dataArr.results.map((item) => ({
name: item.name.first + " " + item.name.last,
email: item.email
})));
});
}
В приведенном выше коде мы извлекаем данные из URL-адреса, который возвращает данные в формате JSON, а затем настраиваем их в userList. Простейшая форма использования fetch() принимает только один аргумент, который представляет собой путь к ресурсу, который вы хотите получить, а затем возвращает обещание, содержащее ответ от запроса на выборку. Этот ответ является объектом.
Ответ представляет собой обычный ответ HTTP, а не фактический JSON. Чтобы получить содержимое тела JSON из ответа, нам нужно изменить ответ на фактический JSON, используя метод json() в ответе.
Аксиос
Axios — это простой в использовании HTTP-клиент на основе обещаний для браузера и node.js. Поскольку Axios основан на промисах, мы можем воспользоваться преимуществами асинхронности и дождаться более читаемого и асинхронного кода. С Axios мы получаем возможность перехватывать и отменять запросы, он также имеет встроенную функцию, обеспечивающую защиту на стороне клиента от подделки межсайтовых запросов.
Давайте реализуем ту же функцию apiCall, используя Axios.
const apiCall=()=>{
const apiUrl = "https://randomuser.me/api/?results=20"
axios.get(apiUrl).then((dataArr) =>{
setUserList(dataArr.results.map((item) => ({
name: item.name.first + " " + item.name.last,
email: item.email
})));
});
}
Axios — это сторонняя библиотека, поэтому установите ее с помощью следующей команды:
npm install axiosВ предыдущем блоке кода мы делаем запрос GET, который возвращает обещание, содержащее пользовательские данные. Когда обещание разрешается, мы присваиваем данные переменной состояния userList.
Axios-Hooks
Axios-Hooksпредлагает гораздо более чистый способ использования Axios с крючками с меньшим количеством строк кода. Он имеет все предварительно написанные хуки, которые используют все функции Axios, и имеет встроенную поддержку рендеринга на стороне сервера.
Давайте поймем из приведенного ниже примера, как выглядит запрос GET с хуками axios:
import useAxios from 'axios-hooks'
function App() {
const [{ data, loading, error }, refetch] = useAxios(
'https://reqres.in/api/users?delay=1'
)
if (loading) return <p>Loading...</p>
if (error) return <p>Error!</p>
return (
<div>
<button onClick={refetch}>refetch</button>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
)
}
В приведенном выше коде при монтировании компонента он автоматически запускает вызов API и устанавливает результат в data, load как true, пока вызов API не будет в процессе, и поместит полученную ошибку в вызов API.
Чтобы управлять вызовом API вручную, нам нужно внести небольшое изменение, и useAxios хук будет выглядеть так:
import useAxios from 'axios-hooks'
function App() {
const [{ data, loading, error }, refetch] = useAxios(
{
url: 'https://reqres.in/api/users/1',
method: 'GET'
},
{ manual: true }
)
if (loading) return <p>Loading...</p>
if (error) return <p>Error!</p>
return (
<div>
<button onClick={refetch}>refetch</button>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
)
}
Теперь API вызывается только тогда, когда мы вызываем функцию refetch.
Обратите внимание, что при использовании axios-hooks количество строк кода резко сократится. В то же время он предоставляет data, loading и error, поэтому нам также не нужно беспокоиться об управлении состоянием.
Теперь давайте посмотрим на изменения в нашем исходном примере с использованием хуков axios:
import useAxios from 'axios-hooks'
function App() {
const [{ data, loading, error }, refetch] = useAxios(
{
url: 'https://reqres.in/api/users/1',
method: 'GET'
},
{ manual: true }
)
if (loading) return <p>Loading...</p>
if (error) return <p>Error!</p>
return (
<div>
<button onClick={refetch}>refetch</button>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
)
}
Если мы внимательно посмотрим на приведенный выше код, то заметим, что мы не использовали useState и useEffect.
Вы можете поиграть со всем вышеперечисленным кодом в песочнице.
Fetch против Axios
Давайте поговорим о том, насколько хорошо Fetch и Axios поддерживают несколько функций.
- Установка — Axios — это автономный сторонний пакет, который можно легко установить. Fetch встроен в большинство современных браузеров; установка как таковая не требуется.
- Основной синтаксис — синтаксически и Fetch, и Axios очень просты. Но Axios поддерживает готовое преобразование ответа в JSON, поэтому при использовании Axios мы пропускаем этап преобразования ответа в JSON, в отличие от
Fetch(), где нам все равно пришлось бы преобразовывать ответ в JSON. - Обработка тайм-аута ответа. Установить тайм-аут для ответов очень просто в Axios, используя параметр
timeoutвнутри объекта запроса. Но в Fetch сделать это не так просто. Fetch предоставляет аналогичную функцию с использованием интерфейсаAbortController(), но ее реализация требует больше времени и может запутаться. - Перехват HTTP-запросов. Axios позволяет разработчикам перехватывать HTTP-запросы. HTTP-перехватчики нужны, когда нам нужно изменить HTTP-запросы от нашего приложения к серверу. Перехватчики дают нам возможность создавать промежуточное ПО для каждого ответа на запрос, написав код в одном месте.
- Одновременное выполнение нескольких запросов. Axios позволяет нам выполнять несколько HTTP-запросов с использованием метода
axios.all().fetch()предоставляет ту же функцию с использованием методаpromise.all(), мы можем сделать несколькоfetch()запросов внутри него. - Совместимость с браузерами — Axios поддерживает широкий спектр браузеров. Fetch поддерживает только Chrome 42+, Firefox 39+, Edge 14+ и Safari 10.1+.
Axios и Fetch одинаково хорошо используют API, но для небольших приложений лучше использовать fetch. Для крупномасштабных приложений всегда используйте Axios и рассмотрите возможность использования axios-hooks, так как это делает код намного чище.
Подпишитесь на меня в Medium или LinkedIn, чтобы получать обновления о новых технологиях.
Далее Читать Формат кода Python.
