Is Axios already out of date? Get to know the new-gen request tool

Hey there! Today I want to share with you a topic that has really struck a chord with me - the automatic retry request strategy. This feature has been an absolute lifesaver for me! When dealing with network requests, especially in unstable network environments, the auto-retry strategy has become my trusted companion. It's made my app much more robust and significantly improved the user experience. Today, I'd love to tell you all about the auto-retry request strategy in alovajs - I'm sure you'll be just as excited about it as I am!

What is alovajs?

First, let me introduce you to alovajs. alovajs is a next-generation request tool, and it's much more than just a simple HTTP client. Unlike libraries like react-query and swrjs, alovajs provides a more modern OpenAPI generation solution. It can generate the interface call code, TypeScript types, and API documentation all with a single click, greatly simplifying the front-end and back-end collaboration process. Even better, alovajs also offers a variety of high-quality request strategies that can meet almost all specific request scenario needs. Using alovajs, you only need a little bit of code to implement complex request logic - it's been a real game-changer for me.

If you want to learn more about alovajs, I strongly recommend you check out the official website: https://alova.js.org. There, you'll find more detailed documentation and examples, and I'm sure you'll discover even more interesting features.

Using the Auto-Retry Request Strategy

Now, let's dive into how to use the auto-retry request strategy in alovajs. This feature is truly a lifesaver, especially for important requests.

Basic Usage

import { useRetriableRequest } from 'alova/client';

const {
  loading,
  data,
  error,
  onError,
  onRetry,
  onFail,
  onSuccess,
  onComplete
} = useRetriableRequest(request);

This code looks pretty simple, right? But it can handle a lot of complex situations. By default, it will retry up to 3 times, with a 1-second delay between each retry. This already covers most needs.

Customizing Retry Count

If you need more control, alovajs provides plenty of options. For example, you can customize the maximum number of retries:

const { send } = useRetriableRequest(request, {
  retry: 5
});

This will allow it to retry up to 5 times.

Dynamic Retry Conditions

Sometimes, you may want to decide whether to continue retrying based on the specific error. alovajs has considered this as well:

useRetriableRequest(request, {
  retry(error, ...args) {
    return /network timeout/i.test(error.message);
  }
});

This code will continue retrying if it encounters a network timeout error.

Customizing Retry Delay

alovajs also allows you to customize the retry delay:

useRetriableRequest(request, {
  backoff: {
    delay: 2000,
    multiplier: 2
  }
});

With this configuration, the first retry will wait 2 seconds, the second 4 seconds, the third 8 seconds, and so on. This exponential backoff strategy is very useful in many scenarios.

Manually Stopping Retries

Finally, if you need to manually stop the retries, alovajs provides this functionality too:

const { stop } = useRetriableRequest(request, {
  // ...
});

const handleStop = () => {
  stop();
};

This can be handy in certain special cases, like when the user actively cancels an operation.

Conclusion

The auto-retry request strategy in alovajs has really impressed me. It's not only powerful, but also extremely flexible to use. With this feature, we can effectively handle various network exceptions and improve the reliability of our applications.

In my projects, using this feature has significantly reduced user-reported network issues. It's truly enhanced the user experience.

What do you think about this feature? Are you interested in trying it out in your own projects? Feel free to share your thoughts in the comments. If you found this article helpful, don't forget to give it a like! Let's explore together how we can make our applications more stable and reliable.