Skip to main content

useRequest 里面的loading是怎么实现的

useRequest function simplification

function useRequest(asyncFn, options) {
const [loading, setLoading] = useState(false);

const run = async () => {
setLoading(true);

try {
await asyncFn();
} catch (error) {
// Handle error if necessary
} finally {
setLoading(false);
}
};

useEffect(() => {
if (options.manual) {
return; // If manual option is true, don't trigger the request automatically
}

run(); // Trigger the request automatically
}, []);

return { run, loading };
}

In this example, the useRequest hook uses the useState hook to manage the loading state, which starts as false. When the run function is called, it sets loading to true before executing the asyncFn asynchronously. After the asyncFn completes (either successfully or with an error), the loading state is set back to false using the finally block.

The useEffect hook is used to automatically trigger the request when the component using useRequest mounts (empty dependency array []). However, if the manual option is set to true, the request won't be triggered automatically, and it's up to the consumer of the hook to call run manually when desired.

So, in this example, the loading state is managed internally by the useRequest hook. It is set to true before the async function is called and then set to false once the async function completes, regardless of whether it returns a value or not.



Comments

Post a Comment

Popular posts from this blog

Valgrind

  Using Valgrind to check memory How to use Valgrind -To valgrind the program, run the valgrind command and give it our program name as an argument. -For example, if we want to run ./myProgram hello 42, we can simply run Valgrind ./myProgram hello 42.  Uninitialized Values -When we run the program, we may use uninitialized values. It needs to be fixed. Valgrind can tell us about the use of uninitialized values. But it only tell when the control flow of the program depends on the unitialized value. For example, uninitialized value appears in the conditional expression of an if, or a loop, or in the switch statement. -If we want to know where the uninitialized value is from, we can use Valgrind    --track-origins=yes ./myProgram -Using -fsanitize=address can find a lot of problems that Memcheck cannot.  -We can use Valgrind with GDB to debug. We can run: --vgdb=full --vgdb-error=0., then Valgrind will stop on the first error that it encounters and give control to ...
Post a Comment
Read more

Error Handling and Exceptions

  Error Handling and Exceptions - The worst possible way to deal with any problem is for the program to produce the wrong answer without informing the user - a silent failure.  - When the program deals with an error by aborting, it should do so with the explicit intention of the programmer. (i.e. the programmer should call assert or check a condition then call abort) And the program should give an error message to the user. Simply segmentation fault due to an invalid memory access is never appropriate. - Sometimes we would prefer to handle the error more gracefully. Graceful error handling requires making the user aware of the problem, as well as allowing the program to continue to function normally. - For example, we would present the user with some options to remedy the situation, like entering a different input, select a different file, retry a failed operation, etc.  - As our programming skills develop, we should get into the practice of writing bullet proof code - co...
Post a Comment
Read more

ADTs

  ADTs 1. Queue -FIFO We can implement in this way:  template<typename T> class Queue { public:     void enqueue(const T & item);     T dequeue();     T & peek()     const T & peek() const;     int numbebrOfItem() const; }; - In the actual C++ STL library, it has the following functions: push() pop() peek() 2. Stack - LIFO We can implement in this way: template<typename T> class Stack { public:     void push(const T & item);     T pop();     T & peek();     const T & peek() const;     int numberOfItem() const; }; In the C++ STL library, it has similar functions as queue. 3. Sets - Add - Test if an item is in the set - Check if the set is empty - Take the union of two set - intersect two sets A variant of this ADT is a multiset. (Also called a bag) It allows the same element to appear multiple times, whereas a true set either has an object or n...
Post a Comment
Read more