Иногда извлечение данных API с использованием может быть сложно. В этой статье мы рассмотрим один трюк для эффективного извлечения данных с помощью использования.
В этой статье предполагается, что вы понимаете, как работает крючок использования. Если вы этого не сделаете, посетите документы React.
Начнем, не так ли?
settimeout
SetTimeout – это функция JavaScript, которая принимает другую функцию или случайный фрагмент кода и выполняет ее после указанного периода времени (миллисекунд).
setTimeout(
console.log('You will get this in five seconds egghead.'),
5000)
Функция SetTimeout выполнит функцию console.log () через пять секунд запуска кода.
setTimeout(
function Add(a, b){
return 4+7;
},
3000)
Здесь мы видим, что функция SetTimeout может выполнить другую функцию. Функция добавления внутри функции SetTimeout в этом случае работает через три секунды запуска кода.
Это должно очень много объяснить, как работает функция Settimeout. Давайте теперь посмотрим, как мы можем использовать его для извлечения данных с помощью использования.
Извлечение данных в использовании
useEffect(() => {
const fetchData = async () => {
await fetch(`https://api.github.com/users/${input}`)
.then((res) => res.json())
.then((res) => setData([res]))
.catch((e) => console.error(e));
};
fetchData();
}, [input]);
Как мы можем видеть в приведенном выше коде, запрос будет отправлен на API GitHub, основываясь на том, что типизирует пользователь на входе. Но существует проблема с этим методом запроса данных из API, учитывая тот факт, что пользователь вводит значение поиска. Позволь мне показать тебе!
Если вы очень хорошо посмотрите на изображение выше, вы увидите, что в API есть запрос на API на каждом клавиш в сети, что плохо. Это плохо, потому что в API отправляются несколько запросов, и есть и несколько ответов. Это вызвано функцией использования, которая работает при каждом изменении состояния. Помните, что состояние меняется всякий раз, когда существует клавиш, а использование, каждый раз, когда происходит изменение состояния. Таким образом, каждый раз, когда вы нажимаете на клавиатуру, API представлен запрос.
Две другие проблемы с этим методом:
Он замедляет приложение из -за слишком большого ненужного и не относящегося к делу запроса в API, и он подвержен ошибке.
Всегда существует ограничение на количество запроса, которое пользователь может сделать на API в час. Таким образом, это уменьшает количество точных данных, которые вы можете получить от API, поскольку многие ненужные запросы поживают указанное количество разрешенного запроса API.
Что ж, мы, очевидно, этого не хотим, поэтому будем использовать SetTimeout для решения проблемы нескольких запросов. Пойдем!
Решение
Решение этой проблемы многочисленного ненужного запроса очень просто. Мы можем решить это, обернув функцию FetchData в функцию SetTimeout.
useEffect(() => {
const fetchData = async () => {
await fetch(`https://api.github.com/users/${input}`)
.then((res) => res.json())
.then((res) => setData([res]))
.catch((e) => console.error(e));
};
const timer = setTimeout(() => {
fetchData();
}, 5000);
return () => clearTimeout(timer);
}, [input]);
В приведенном выше коде функция SetTimeout задерживает любую форму запроса, которая была бы сделана в API после каждого ключа на пять секунд. Это дает пользователю достаточно времени, чтобы полностью ввести значение поиска. Запрос будет сделан через пять секунд No Keypress. Это на самом деле лучше, потому что он не отправляет несколько запросов на API на каждом ключевом потоке.
С Settimeout мы видим, что API представлен только один запрос, и мы получаем только один точный ответ. Эта простая практика может улучшить скорость приложения и его производительность, поскольку она не перегружает сеть с помощью нескольких неактуальных запросов.
С учетом вышесказанного я хочу верить, что вы будете использовать SetTimeout в своем следующем вызове API, когда запрос включает в себя входное значение, чтобы избежать ненужных запросов и ответов. Удачи!
Оригинал: “https://dev.to/reenydavidson/settimeout-in-useeffect-api-call-data-fetching-j33”