使用异步/等待时，如何检测 axios 请求是否处于加载阶段？

Question

I need to detect if the axios request (with async/await) is in loading phase. Because, I need to disable a button if the request is loading.

So, this is the line of code:

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

Now, I need to disable a certain button if this request is in loading phase. But, I'm stuck on how to solve this issue.

Answer 1

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
}

Answer 2

You can achieve this behavior by using the following steps:

1 - Create a state called isLoading and initialize it to false .

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

2 - Get the current state of data fetching:

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 - Disable button conditionally:

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

This is a sample demo in codesandbox .