Как определить, находится ли запрос axios в фазе загрузки при использовании async/await?

Мне нужно определить, находится ли запрос axios (с async/await) в фазе загрузки. Потому что мне нужно отключить кнопку, если запрос загружается.

Итак, это строка кода:

const response = await API.get("/url", options);

Теперь мне нужно отключить определенную кнопку, если этот запрос находится в фазе загрузки. Но я застрял в том, как решить эту проблему.

[JS за 1 час] - 9. Асинхронный
[JS за 1 час] - 9. Асинхронный
JavaScript является однопоточным, то есть он может обрабатывать только одну задачу за раз. Для обработки длительных задач, таких как сетевые запросы,...
Подъем в javascript
Подъем в javascript
Hoisting - это поведение в JavaScript, при котором переменные и объявления функций автоматически "перемещаются" в верхнюю часть соответствующих...
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...
Хук useOnClickOutside в ReactJS
Хук useOnClickOutside в ReactJS
Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...
Хуки (часть-2) - useEffect
Хуки (часть-2) - useEffect
Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
В предыдущем посте я показал вам на примерах, как писать базовые тесты в React. Важнейшей частью пользовательского интерфейса приложений является...
1
0
92
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий
setState(true) //to initiate loading
const response = await API.get("/url", options);
setState(false) //to turn off loading
try{
setState(true) //to initiate loading
const response = await API.get("/url", options);
}
catch(err){}
finally{
setState(false) //to turn off loading
}

Вы можете добиться такого поведения, выполнив следующие действия:

1 - Создайте состояние с именем isLoading и инициализируйте его как false.

const [isloading, setIsloading] = useState(false);

2 - Получить текущее состояние выборки данных:

const fetchingData = async () => {
    try {
        setIsloading(true); // Set loading before sending API request
        const response = await API.get("/url", options);
        ....
        setIsloading(false); // Stop loading
    } catch (error) {
        setIsloading(false); // Stop loading in case of error
        console.error(error);
    }
}

3 - Отключить кнопку условно:

<button disabled = {isloading ? true : false}> button disabled while fetching data</button>

Это пример демо в codeandbox.

Другие вопросы по теме