Can someone explain me how to use useSerialRequest

[RProduction]

Hi, I have some question.
I just don't get how to use useSerialRequest.
I already looked on the documentation, but seem the documentation is lacking in explanation.
I don't get how to create serialHandlers.
In the documentation, to create serialHandler you need to pass a lambda function that return request(args).
First, what is request(args)?
The documentation doesn't show the function of request is pointed to.
The documentation only show request1, request2, request3.
What type is request? Is it requestMethodInstance? can someone give me clearance how can I create serialRequest Hander.

[JOU-amjs]

Yes, the requestX function is means that the function returns a methodInstance, detail about methodInstance is here.

the useSerialRequest is a use hook that you can send several requests serially, so each methodInstance represents a request.

[RProduction]

Alright, I am back.
Thank you for clarification.
I also found it when I fiddle with the code.
I am just going to tell my requirement here.

I actually need to make dynamic request based of array of link. So what I want to do here is to call parallel request of dynamic array of useRequest.

Is there is an elegant way to do that?
In axios you can use axios.all
Can I use alova for that too?

I don't want to use axios back.
Using alova make it easy to place api call in react component with full component lifecycle support.

[JOU-amjs]

@starfallproduction According to your situation, you can use methodInstance to send request directly, and use Promise.all to await all responses, example below.

const handleCertainEvent = async () => {
  const promises = [request1(args).send()];
  if (someCondition) {
    promises.push(request2(args).send());
  }
  const [response1, response2] = await Promise.all(promises);
  // ...
}

here requestX is also returns method instance.

this solution need to create and maintain states related request. like axios.

In future, it can be considered to write a use hook about parallel, such as useParallelRequest😁. now if it is always used in your project, you can consider to cusomize the useParallelRequest by yourself via the core use hook of alova such as useRequest/useWatcher/useFetcher.

[RProduction]

It's really helpful if there is hook to handle batch request.

Anyway, I already try it.
I use useEffect and useState to handle the promise.
It's working.
But seem it triggers update and useEffect trigger another request.
The console print HitCache for another request called.

Const [boards, setBoards] = useState<Board[]>([]);
Const boardInst = alovaInstanceGenerator(['link']);
Const promises = boardInst.map(v => v.send());

useEffect(() => {
  // fetch batch
}, [promises]);

useEffect(() => {
  // print log boards
}, [boards]);

This is my code.

[JOU-amjs]

Incorrect usage.
In react, there would be recall the component function when any state is changed, so in your code, it is possible to send requests repeatedly.

my suggestion is that send request in useEffect, code below to prevent requesting repeatedly.

Const [boards, setBoards] = useState<Board[]>([]);

useEffect(() => {
  const boardInst = alovaInstanceGenerator(['link']);
  const promises = boardInst.map(v => v.send());
  const res = await Promise.all(promises);
}, []);

useEffect(() => {
  // print log boards
}, [boards]);

[JOU-amjs]

Just use alovaInst.Get('xxx').send() as axios.get('xxx').

[RProduction]

Thank you for the code.
At first I use useState to handle the boardInst and promises.
After your suggestion, I refactored the code.
I wrap creation of boardInst and promises inside fetchFunction, so I can pass the function to refresh.

[RProduction]

But still, I am still confused about useSerialRequest.
useSerialRequest seem to pass previous request response to next response.
Can you give me an example of use case for useSerialRequest.

[JOU-amjs]

I did not provide this example before, I will add one later.

[JOU-amjs]

here is the example of serial request.😊

[RProduction]

Alright thank you very much for helping me.
Let close this discussion

[JOU-amjs]

@starfallproduction I'm doing an survey about "Why using alova". Could you please tell me why replace axios with alova? is axios anywhere not good at? or is alova anywhere good at than axios?

[RProduction]

Well actually one of the reason why I decided to use alova is I am trying new library another than axios to handle web request.

Axios is indeed easy to use. But when I try alova, alova seem to focus on implementing web request along side component lifecycle.
It really make me easy to implement web request and handle state easily along side react component. It also reducing code needed to implement API request.

Well it is not like axios will be abandon. I don't to much about alova, but I think alova shine when used in web framework like react and vue.

Axios will be used if i don't use react.
That's all.

Also axios adapter for alova really make my work easy. When I am using global fetch adapter, I need to convert response stream manually.

[JOU-amjs]

Very satisfactory answer, thanks