DEV Community: Eddie Kimpel

From Client to Server: Alova 3's Full-Stack Request Strategy Practice

Eddie Kimpel — Thu, 04 Dec 2025 14:49:58 +0000

Many people may still think of alova as a lightweight request strategy library, which is certainly the core feature of alova 2. For example, consider the following code:

const { loading, data, error } = useRequest(() => alovaInstance.Get('/xxx'))

This is a typical example of alova being used on the client side. However, alova has now been updated to version 3. Of course, these client strategies remain intact, but it's no longer limited to the client side—it can now handle server-side scenarios with ease.

Alova 3 provides server-side request strategies (server hooks) and server-side storage adapters like Redis and file storage, allowing us to conveniently implement full-chain requests and forwarding on the server side.

Let's first look at the complete flow of a request:

Client (Browser/App)
    → Node.js BFF Layer (data transformation, etc.)
    → API Gateway (authentication, rate limiting, routing, etc.)
    → Backend Microservices

The server hooks and distributed multi-level caching provided by alova allow us to easily implement request handling at all of the above levels.

Forwarding Client Requests in the BFF Layer

In the BFF layer, we often need to forward client requests to backend microservices. You can use async_hooks to access the context of each request and add it to the request in alova's beforeRequest, enabling the forwarding of user-related data.

import { createAlova } from 'alova';
import adapterFetch from '@alova/fetch';
import express from 'express';
import { AsyncLocalStorage } from 'node:async_hooks';

// Create async local storage instance
const asyncLocalStorage = new AsyncLocalStorage();

const alovaInstance = createAlova({
  requestAdapter: adapterFetch(),
  beforeRequest(method) {
    // Get request headers from async context and pass to downstream
    const context = asyncLocalStorage.getStore();
    if (context && context.headers) {
      method.config.headers = {
        ...method.config.headers,
        ...context.headers
      };
    }
  },
  responded: {
    onSuccess(response) {
      // Data transformation processing
      return {
        data: response.data,
        timestamp: Date.now(),
        transformed: true
      };
    },
    onError(error) {
      console.error('Request failed:', error);
      throw error;
    }
  }
});

const app = express();

// Set once in middleware, automatically passed throughout
app.use((req, res, next) => {
  const context = {
    userId: req.headers['x-user-id'],
    token: req.headers['authorization']
  };
  asyncLocalStorage.run(context, next);
});

// Business code focuses on business logic
app.get('/api/user-profile', async (req, res) => {
  // No need to manually pass context anymore!
  const [userInfo, orders] = await Promise.all([
    alovaInstance.Get('http://gateway.com/user/profile'),
    alovaInstance.Get('http://gateway.com/order/recent')
  ]);

  res.json({ user: userInfo.data, orders: orders.data });
});

Use Cases in API Gateway

In gateways, authentication, request rate limiting, and request distribution are often needed. Alova 3's Redis storage adapter and rateLimiter can effectively implement distributed authentication services and request rate limiting.

Authentication Can Be Done Like This

If authentication tokens have an expiration time, you can configure a Redis storage adapter in the gateway to store tokens in Redis for reuse. For single-machine cluster services, you can also use the @alova/storage-file file storage adapter.

import { createAlova } from 'alova';
import RedisStorageAdapter from '@alova/storage-redis';
import adapterFetch from '@alova/fetch';
import express from 'express';

const redisAdapter = new RedisStorageAdapter({
  host: 'localhost',
  port: '6379',
  username: 'default',
  password: 'my-top-secret',
  db: 0
});

const gatewayAlova = createAlova({
  requestAdapter: adapterFetch(),
  async beforeRequest(method) {
    const newToken = await authRequest(method.config.headers['Authorization'], method.config.headers['UserId'])
    method.config.headers['Authorization'] = `Bearer ${newToken}`;
  }
  // Set L2 storage adapter
  l2Cache: redisAdapter,
  // ...
});

const authRequest = (token, userId) => gatewayAlova.Post('http://auth.com/auth/token', null, {
  // Set 3-hour cache, will be saved in Redis, subsequent requests with same parameters will hit cache
  cacheFor: {
    mode: 'restore',
    expire: 3 * 3600 * 1000
  },
  headers: {
    'x-user-id': userId,
    'Authorization': `Bearer ${token}`
  }
});

const app = express();

// Implement app to receive all requests and forward to alova
// Register routes for all HTTP methods
const methods = ['get', 'post', 'put', 'delete', 'patch', 'options', 'head'];
methods.forEach(method => {
  app[method]('*', async (req, res) => {
    const { method, originalUrl, headers, body, query } = req;

    // Use alova to send request
    const response = await gatewayAlova.Request({
      method: method.toLowerCase(),
      url: originalUrl,
      params: query,
      data: body,
      headers
    });

    // Forward response headers
    for (const [key, value] of response.headers.entries()) {
      res.setHeader(key, value);
    }

    // Send response data
    res.status(response.status).send(await response.json());
  });
});

app.listen(3000, () => {
  console.log('Gateway server started on port 3000');
});

Of course, if you need to re-authenticate for every request, you can also remove cacheFor in authRequest to disable caching.

Rate Limiting Strategy

Alova's rateLimiter can implement distributed rate limiting strategies, internally using node-rate-limiter-flexible. Let's refactor the implementation:

import { createRateLimiter } from 'alova/server';

const rateLimit = createRateLimiter({
  /**
   * Time for points reset, in ms
   * @default 4000
   */
  duration: 60 * 1000,
  /**
   * Maximum consumable quantity within duration
   * @default 4
   */
  points: 4,
  /**
   * Namespace, prevents conflicts when multiple rateLimits use the same storage
   */
  keyPrefix: 'user-rate-limit',
  /**
   * Lock duration in ms, indicates that when rate limit is reached, it will extend [blockDuration]ms, e.g., 5 wrong passwords in 1 hour locks for 24 hours, this 24 hours is this parameter
   */
  blockDuration: 24 * 60 * 60 * 1000
});

const methods = ['get', 'post', 'put', 'delete', 'patch', 'options', 'head'];
methods.forEach(method => {
  app[method]('*', async (req, res) => {
    const { method, originalUrl, headers, body, query } = req;

    // Use rateLimit wrapper here, it will use l2Cache storage adapter by default to store control parameters, in this example it will use Redis storage adapter.
    const method = gatewayAlova.Request({
      method: method.toLowerCase(),
      url: originalUrl,
      params: query,
      data: body,
      headers
    });
    const response = await rateLimit(method, {
      key: req.ip // Use IP as tracking key to prevent frequent requests from the same IP
    });

    // ...
  });
});

Third-Party Service Integration: Automatic Token Maintenance

Integrating with external APIs requires access_token management, and many third-party access_tokens have usage limits. Here we can use alova 3 + Redis storage adapter to implement distributed automatic lifecycle maintenance of access_tokens, where Redis is used for access_token caching, and atom hook is used for atomic operations of distributed token updates.

import { createAlova, queryCache } from 'alova';
import RedisStorageAdapter from '@alova/storage-redis';
import adapterFetch from '@alova/fetch';
import { atomize } from 'alova/server';

const redisAdapter = new RedisStorageAdapter({
  host: 'localhost',
  port: '6379',
  username: 'default',
  password: 'my-top-secret',
  db: 0
});
const thirdPartyAlova = createAlova({
  requestAdapter: adapterFetch(),
  async beforeRequest(method) {
    // Check if it's a third-party API, if so, get the token
    if (method.meta?.isThirdPartyApi) {
      // Get token in an atomic way to prevent multiple processes from getting token simultaneously
      const accessTokenGetMethod = getAccessToken();
      let accessToken = await queryCache(accessTokenGetMethod);
      if (!accessToken) {
        // Will be cached after successful retrieval
        accessToken = await atomize(accessTokenGetMethod);
      }
      method.config.params.access_token = accessToken;
    }
  },
  l2Cache: redisAdapter,
});

const getAccessToken = () => thirdPartyAlova.Get('http://third-party.com/token', {
  params: {
    grant_type: 'client_credentials',
    client_id: process.env.THIRD_PARTY_CLIENT_ID,
    client_secret: process.env.THIRD_PARTY_CLIENT_SECRET
  },
  cacheFor: {
    mode: 'restore',
    expire: 1 * 3600 * 1000 // Two hours cache time
  }
});

const getThirdPartyUserInfo = userId => thirdPartyAlova.Get('http://third-party.com/user/info', {
  params: {
    userId
  },
  meta: {
    isThirdPartyApi: true
  }
});

Final Thoughts

In addition to these, alova also provides distributed verification code sending and validation, request retry, and other server hooks. If you want to learn more, you can refer to Server-Side Request Strategies.

If you think alova is good, we sincerely hope you can try it out and give us a free GitHub star.

Visit the alovajs official website for more detailed information: alovajs Official Website.

If you're interested, you can join our community to get the latest updates first and communicate directly with the development team, sharing your ideas and suggestions.

If you have any questions, you can join the above groups for consultation, or post in GitHub repository Discussions. If you encounter problems, please submit them in GitHub issues, and we will resolve them as quickly as possible.

React Query and SWR users must see: a smarter way of data requests

Eddie Kimpel — Sun, 03 Nov 2024 18:56:02 +0000

Hey there! Today I want to share with you an incredibly useful feature - automatic data fetching. Have you ever encountered a situation where the user switches back to the app page, but the data is still in the old state? Or maybe you need to refresh the data periodically, but don't want to do it manually? In these cases, the auto-fetch feature is a total lifesaver! It has really helped me a lot, making my app smarter and more fluid. Today, I'm going to show you how to implement this amazing feature using alovajs.

First, let me introduce you to alovajs. It's a super powerful next-generation request tool. Not only does it provide a modern openapi generation solution, but it can also generate interface call code, TypeScript types, and interface documentation with just one click. Compared to libraries like react-query and swrjs, alovajs goes even further - it provides high-quality request strategies for various scenarios, allowing us to implement complex request logic with very little code.

I was truly amazed when I first started using alovajs. It can be a powerhouse on both the client-side and server-side (like Node.js, Deno, and Bun). It's like alovajs has given my development work a pair of wings, making everything so much easier and more efficient.

Want to know more about alovajs? Head over to the official website at https://alova.js.org and check it out! I'm sure you'll be as captivated by its powerful features as I am.

Automatic Data Fetching: Making Your App Smarter

Now, let's dive into how to implement automatic data fetching using alovajs. alovajs provides a super handy hook called useAutoRequest. It supports automatically fetching the latest data in scenarios like browser focus, tab switches, network reconnections, and polling.

Let's see how to use it:

import { useAutoRequest } from 'alova/client';

const { loading, data, error } = useAutoRequest(() => method());

It's that simple! By default, it will automatically fetch data when the browser shows/hides, focuses, or reconnects to the network, and it will also automatically cancel the listener when the component is unmounted. How considerate!

Customizable Configuration: Flexible for Various Scenarios

But wait, there's more! We can customize the configuration, like this:

const { loading, data, error } = useAutoRequest(() => method(), {
  enableVisibility: true,  // Trigger on browser show/hide
  enableFocus: true,       // Trigger on browser focus
  enableNetwork: true,     // Trigger on network reconnection
  throttle: 1000,          // Throttle time to avoid frequent requests
  pollingTime: 2000        // Polling time, request every 2 seconds
});

These configurations allow us to have fine-grained control over the auto-fetch behavior. It's been a lifesaver for me! I once used this feature to solve a tricky real-time data update problem, and it significantly boosted my app's performance.

Pause Requests: Flexible Control

Sometimes, we may need to pause the automatic requests, like when the user leaves the page but the component is not destroyed. Don't worry, alovajs has considered this too:

let pause = false;
useAutoRequest({
  // ...
  middleware(_, next) {
    if (!pause) {
      next();
    }
  }
});

By controlling the pause variable, we can easily pause or resume the automatic requests. This feature was a huge help when I was developing an app that required frequent page switching - it ensured data timeliness while avoiding unnecessary requests.

Cross-Platform Support: Automatic Requests Everywhere

Finally, for non-browser environments, alovajs allows us to customize the listener functions. For example, in React Native, we can set up the network reconnection listener like this:

import NetInfo from '@react-native-community/netinfo';
useAutoRequest.onNetwork = (notify, config) => {
  const unsubscribe = NetInfo.addEventListener(({ isConnected }) => {
    isConnected && notify();
  });
  return unsubscribe;
};

This flexibility is amazing, allowing us to use the auto-fetch feature in any environment. I remember a time when I was developing a cross-platform app, and this feature saved me from writing a ton of repetitive code.

Conclusion: alovajs Makes Development Easier

In summary, alovajs's automatic data fetching feature is incredibly useful! It not only makes our apps smarter, but also greatly reduces our workload. Say goodbye to the hassle of manually managing data refreshes, and let your app keep itself up-to-date.

Have you thought of using this feature to solve some of your previous tricky problems? Or do you have other use cases in mind? Feel free to share your ideas in the comments! And if you found this article helpful, don't forget to give it a like. Let's explore the endless possibilities of alovajs together!

react-query outdated? This new tool will double your efficiency, no cap

Eddie Kimpel — Sat, 02 Nov 2024 19:26:03 +0000

Wow, my fellow front-end developer friends, I've recently discovered a super useful tool - the verification code request strategy! 🤩 This strategy has really been a lifesaver for me, especially in scenarios where I need to update data in real-time. It's made my app so much smoother, and the user experience has skyrocketed as a result. I can't wait to tell you all about this amazing thing!

🚀 alovajs: The Rising Star of Request Strategies

When it comes to the verification code request strategy, I have to mention the powerful tool called alovajs. alovajs is a next-generation request tool that not only simplifies the request process, but also provides a more modern openapi generation solution.

Unlike libraries like react-query and swrjs, alovajs can generate interface call code, interface typescript type, and interface documentation with just one click. 🤯 This greatly shortens the collaboration distance between the front-end and back-end, making development much more efficient. To be honest, when I first started using it, I was completely blown away - I felt like my development efficiency went up by a whole level!

If you're as interested in alovajs as I am, I strongly recommend you check out the official website: https://alova.js.org. I'm sure you'll be just as impressed by its powerful features as I am! 😎

🎯 Verification Code Request Strategy: Simple yet Powerful

Now, let's take a look at how to use alovajs's verification code request strategy. The usage method is so simple, it'll surprise you! 🤩

First, we need to import useCaptcha from alovajs:

import { useCaptcha } from 'alova/client';

Then, we can use it like this:

<template>
  <input v-model="mobile" />
  <button
    @click="sendCaptcha"
    :loading="sending"
    :disabled="sending || countdown > 0">
    {{ loading ? '发送中...' : countdown > 0 ? `${countdown}后可重发` : '发送验证码' }}
  </button>
</template>

<script setup>
  import { ref } from 'vue';
  import { apiSendCaptcha } from './api.js';
  import { useCaptcha } from 'alova/client';

  const mobile = ref('');
  const {
    // 发送状态
    loading: sending,

    // 调用sendCaptcha才会请求接口发送验证码
    send: sendCaptcha
  } = useCaptcha(() => apiSendCaptcha(mobile.value));
</script>

See? It's that simple! 😲 useCaptcha handles all the complex connection management for us, so we can just focus on the business logic. You know, when I saw how easy it was to use this strategy, I felt like a total rockstar developer. I was able to handle real-time data updates with just a few lines of code! 🤩

And if you need to customize the countdown time, that's easy too:

useCaptcha(() => apiSendCaptcha(mobile.value), {
  // ...
  // highlight-start
  // Set the countdown to 20 seconds
  initialCountdown: 20
  // highlight-end
});

Using alovajs's verification code request strategy makes real-time data updates so darn simple. 🔥 It not only provides a more concise and easy-to-use API, but also automatically manages the connections, greatly reducing our workload. I feel like this is a small revolution in front-end development! 🎉

🎉 Summary and Reflection

Let's recap the key benefits of alovajs's verification code request strategy:

Concise and easy-to-use API: It feels as natural as writing regular JavaScript code. 😎
Automatic connection management: No more worrying about connection status handling. 🙌
Flexible event binding: Easily handle various complex real-time data scenarios. 🤖

These features allow us to focus more on the business logic, rather than getting bogged down in the implementation details. To be honest, after using alovajs, I feel like my development efficiency has increased by at least 30%! 🚀

However, I've also been thinking: Even though alovajs brings us so much convenience, should we also try to understand its underlying implementation principles? 🤔 After all, knowing the "why" behind the "what" can help us better troubleshoot and solve problems when they arise.

My fellow developer friends, what challenges have you encountered when dealing with real-time data updates? Has alovajs's feature solved your pain points? Do you have similar thoughts? Feel free to share your ideas and experiences in the comments. Let's discuss and progress together, and build even better user experiences! 💪

If you find this article helpful, don't forget to give it a like. 👍 Your support is the driving force for me to continue sharing! I'll see you next time, as we explore the wonderful world of front-end development! 🌟

Forget about axios, this new tool makes automatic data fetching a breeze!

Eddie Kimpel — Fri, 01 Nov 2024 15:16:03 +0000

Shocked? This form submission strategy is even stronger than react-query!

Hey, my fellow front-end developers! Today I'm going to share with you a super useful thing - the form submission strategy. To be honest, you guys must have had a headache with all the details of form submission, right? Don't worry, I recently found a tool that really helped me a lot, and it makes form submission simple and efficient. Let me share this magical assistant with you today!

alovajs: The Powerful Helper for Form Submission

When it comes to form submission strategy, we can't help but mention the awesome tool called alovajs. alovajs is a next-generation request tool that simplifies the request process. To be honest, it not only provides a more modern openapi generation solution, but also offers high-quality request strategies for various request scenarios. Compared to libraries like react-query and swrjs, alovajs is much smoother to use, allowing us to implement specific scenarios with very little code.

If you want to learn more about alovajs, you can check out the official website: https://alova.js.org. Believe me, you'll discover a whole new world of requests!

alovajs' Form Submission Strategy

Now, let's take a look at how alovajs' form submission strategy is used. In my opinion, these features are really thoughtful!

Basic Usage

First, let's look at the basic usage:

const submitData = data => {
  return alovaInstance.Post('/api/submit', data);
};

const {
  loading: submiting,
  form,
  send: submit,
  onSuccess,
  onError,
  onComplete
} = useForm(
  formData => {
    return submitData(formData);
  },
  {
    initialForm: {
      name: '',
      cls: '1'
    }
  }
);

This code looks pretty simple, right? But it's already handled a lot of details for us. When I first used it, I was really amazed by its conciseness!

Automatic Form Reset

Automatic form reset after submission? No problem! Just set a parameter:

useForm(submitData, {
  resetAfterSubmiting: true
});

This feature really saved me a lot of trouble. No more manual form reset!

Update Form Data

Need to update form data? Also very simple:

const { updateForm } = useForm(submitData, {
  initialForm: {
    name: '',
    cls: '1'
  }
});

onSuccess(({ data }) => {
  updateForm({
    name: data.name,
    cls: data.cls
  });
});

This feature is a lifesaver for editing forms!

Form Draft Function

alovajs also provides a form draft function, which can restore form data even after refreshing the page:

useForm(submitData, {
  store: true
});

To be honest, this feature has solved a lot of my troubles. No more worrying about losing data when accidentally refreshing the page!

Multi-page/Multi-step Form

The most surprising thing to me is its multi-page/multi-step form function. Just set an id, and you can share the same form data across different pages:

// Component A
const returnStates = useForm(submitData, {
  initialForm: {
    step1Input: '',
    step2Input: '',
    step3Input: ''
  },
  id: 'testForm'
});

// Component B, Component C
const returnStates = useForm(submitData, {
  id: 'testForm'
});

This way, we can easily handle complex multi-step forms. To be honest, this feature has saved me a lot of trouble!

Conditional Filtering

Finally, if you need to do conditional filtering, alovajs also provides a convenient way:

const { send: searchData } = useForm(queryCity, {
  initialForm: {
    cityName: ''
  },
  immediate: true
});

This feature is really handy for scenarios that require real-time searching!

Summary

After seeing all this, don't you think alovajs' form submission strategy is really powerful? It not only simplifies our code, but also helps us solve many common form problems. After using it, I feel my development efficiency has improved a lot, and the code has become much clearer and easier to understand.

So, how do you guys usually deal with form submission? Have you encountered any tricky problems? You might as well try alovajs, and it might bring you unexpected surprises. Welcome to share your thoughts and experiences in the comments, let's progress together and build better front-end applications!

Axios is so last season, you gotta try this magical retry strategy

Eddie Kimpel — Thu, 31 Oct 2024 20:06:05 +0000

[article content]
Axios已out了?这个神奇的重试策略你一定要试试

大家好!最近我在开发项目的时候,发现了一个超级实用的功能 —— 自动重试的请求策略。你们知道吗,这个小功能真的帮了我大忙!每次处理网络请求失败,总是要写一堆重复的代码,真烦人。但是有了这个策略,一切都变得so easy了!今天就让我来给大家介绍一下吧。

alovajs: 不只是一个普通的请求库

说到自动重试的请求策略,就不得不提到alovajs这个神器了。alovajs是一个全新的请求工具,它不仅仅是个普通的请求库。它提供了一种更现代化的openapi生成方案,一键就能生成接口调用代码、TypeScript类型和接口文档,省去了中间的api文档环节,大大缩短了前后端协作的距离。

最棒的是,alovajs还提供了各种请求场景的高质量请求策略,包括我们今天要讲的自动重试策略。这些策略包含了状态化数据、特定的事件和actions,使用起来比react-query和swrjs更加顺畅。你只需要很少的代码就能实现特定场景下的请求,大大提高了开发效率!

想了解更多关于alovajs的信息吗?快去官网看看吧:https://alova.js.org。我相信你一定会被它的强大功能惊艳到!

自动重试策略

好了,让我们来看看这个自动重试策略到底有多强大吧。

import { useRetriableRequest } from 'alova/client';

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

看,就这么简单!你不仅可以获得请求的加载状态、响应数据和错误信息,还能绑定各种事件回调。这比我们自己写要方便多了,对吧?

自定义重试次数

有时候我们希望请求能自动重试几次,这个也很容易实现:

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

将最大重试次数设置为5,就这么简单。当然,如果你想更灵活地控制重试逻辑,也可以传入一个函数来动态判断。

设置重试延迟

有时候我们希望每次重试之间有一定的延迟时间,这也很容易配置:

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

这样设置后,第一次重试延迟2秒,第二次4秒,第三次8秒,以此类推。你甚至还可以加上随机抖动,让重试更有"随机性"。

手动停止重试

如果某些情况下需要手动停止重试,也很简单:

const { stop } = useRetriableRequest(request);

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

总结

总的来说,alovajs的自动重试策略真的是一个超级实用的功能!它不仅大幅简化了重试逻辑的代码,还提供了各种灵活的配置选项,让开发效率提升不少。

最关键的是,它能帮我们解决很多传统请求处理中的痛点,比如重试次数控制、延迟时间设置等。这些都是日常开发中非常常见的需求,有了这个策略,我们就不用再自己实现了。

你们在开发中有遇到过类似的问题吗?不妨试试alovajs的自动重试策略,说不定能帮到你哦。如果你已经在用了,欢迎在评论区分享你的使用心得!让我们一起探讨,一起进步!

记住,技术在不断进步,我们也要跟上节奏。保持学习的热情,才能在这个快速发展的行业中站稳脚跟。今天的分享就到这里,希望对大家有所帮助。如果觉得有用,别忘了点个赞哦!我们下次再见!

Is React-query out of date? This new favorite makes cross-component requests a breeze!

Eddie Kimpel — Wed, 30 Oct 2024 21:06:05 +0000

React-query已过时？这个新宠让跨组件请求秒变简单！

哇，各位前端小伙伴们，最近我发现了一个超级棒的新技术！你们知道吗，这个东西可以轻松搞定跨组件的请求，简直就是前端开发的救星啊！

alovajs：下一代请求工具

相比起大家熟悉的 react-query 和 swrjs，alovajs 可以说是下一代请求工具了。它不仅简化了请求流程，还提供了现代化的 openapi 生成方案。你们想象一下，只需要一键就能生成接口调用代码、TypeScript 类型和接口文档，是不是超级方便？

要深入了解 alovajs 的强大之处，快去它的官网 https://alova.js.org 看看吧！

跨组件触发请求：alovajs的杀手锏

不过今天我要主要跟大家分享的是 alovajs 的一个超赞功能 —— 跨组件触发请求。你们以前在处理这种需求的时候肯定都很头疼吧？比如说，你在一个组件里更新了菜单数据，然后想要在另一个组件里重新拉取最新的数据。用 Vuex 和 Redux 这些状态管理工具来处理真的太麻烦了！

但是有了 alovajs，一切都变得so easy了。我们只需要在组件 A 里使用 actionDelegationMiddleware 来委托 useRequest 的操作函数，然后在任意其他组件（比如组件 B）里通过 accessAction 就能轻松触发组件 A 的请求。

// 组件A
import { actionDelegationMiddleware } from 'alova/client';

useRequest(queryTodo, {
  middleware: actionDelegationMiddleware('updateTodo')
});

// 组件B 
import { accessAction } from 'alova/client';

accessAction('updateTodo', delegatedActions => {
  delegatedActions.send(); // 触发组件A中的请求
});

酷吧？这样我们就可以在任何地方更新数据了，不用再担心组件层级的限制了。

alovajs 还支持批量触发操作函数。你可以在多个组件中使用相同的委托名称，然后在另一个组件里一次性触发它们。还可以使用正则表达式来批量触发满足条件的请求。这种灵活性真的太棒了，让我们的代码结构更清晰，逻辑更集中！

总结

总之，通过 alovajs 的跨组件触发请求功能，我们可以大大提升开发效率，让代码更易维护。说实话，自从用了 alovajs，我感觉自己的代码水平都提高了不少呢！

各位小伙伴们，你们平时是怎么处理这种需求的呢？有没有遇到什么棘手的问题？不妨试试 alovajs，也许它能给你带来意想不到的惊喜哦！最后，我想请大家思考一下：在你的项目中，是否有可以通过跨组件触发请求来优化的地方？使用 alovajs 会给你的开发流程带来哪些改变？欢迎在评论区分享你的想法和经验，让我们一起进步！

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

Eddie Kimpel — Tue, 29 Oct 2024 23:06:04 +0000

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.

Shocking! This cross-component trick will make react-query users sweat

Eddie Kimpel — Mon, 28 Oct 2024 14:46:03 +0000

Wow, my fellow front-end developers! Today, I want to share with you an incredibly useful feature - 跨组件触发请求. Are you often racking your brain trying to implement a smooth pagination list? Don't worry, I've discovered a super handy tool that has really helped me a lot! I'm so excited I could jump for joy!

alovajs - have you heard of it? It's a next-generation request tool, not just a simple HTTP client. Unlike react-query and swrjs, alovajs provides a complete solution for requests. It can not only handle basic API calls, but also optimize complex data interaction scenarios, such as the pagination list we're going to discuss today.

If you want to dive deeper into alovajs' powerful features, be sure to check out the official website https://alova.js.org. I'm sure you'll discover a whole new world of efficient data requests!

Now, let's see how alovajs makes cross-component request triggering a breeze.

In the past, if you wanted to trigger a request in one component from another component, you had to save the data to the Store and complete it by dispatching an Action. Now, you can use this middleware to eliminate the component hierarchy restriction and quickly trigger the operation functions of any request in any component.

For example, you can re-trigger the request for the sidebar menu after updating the menu data in a certain component, thereby refreshing the data. After operating on the list data, you can trigger the list update.

Features

Delegate the operation functions of any alova use hook;
Trigger the delegated operation functions from any position;

Usage

Basic usage

Taking vue3 as an example, the usage is the same in react and svelte.

Use actionDelegationMiddleware to delegate the operation functions of useRequest in component A.

```javascript title=Component A
import { actionDelegationMiddleware } from 'alova/client';

useRequest(queryTodo, {
// ...
middleware: actionDelegationMiddleware('actionName')
});




In any component (e.g. component B), use `accessAction` to pass in the specified delegation name to trigger the operation functions of `useRequest` in component A.



```javascript title=Component B
import { accessAction } from 'alova/client';

accessAction('actionName', delegatedActions => {
  // Call the send function in component A
  delegatedActions.send();

  // Call the abort function in component A
  delegatedActions.abort();
});

Batch trigger operation functions

In the above example, we used accessAction to trigger the operation function of a use hook, but in fact, the same delegation name will not overwrite each other, but will be saved in a set, and we can use this name to trigger their delegated functions at the same time.

```javascript title=Component C
import { actionDelegationMiddleware } from 'alova/client';

useRequest(queryTodo, {
// ...
middleware: actionDelegationMiddleware('actionName1')
});






```javascript title=Component D
import { actionDelegationMiddleware } from 'alova/client';

useRequest(queryTodo, {
  // ...
  middleware: actionDelegationMiddleware('actionName1')
});

```javascript title=Component E
import { accessAction } from 'alova/client';

// Since it will match the delegated hooks of component C and component D, the callback function will be executed twice
accessAction('actionName1', delegatedActions => {
// Call the send function in component C and component D
delegatedActions.send();

// Call the abort function in component C and component D
delegatedActions.abort();
});




Additionally, you can use regular expressions in `accessAction` to batch trigger the operation functions that meet the delegation name conditions.



```javascript title=Component F
import { actionDelegationMiddleware } from 'alova/client';

useRequest(queryTodo, {
  // ...
  middleware: actionDelegationMiddleware('prefix_name1')
});

```javascript title=Component G
import { actionDelegationMiddleware } from 'alova/client';

useRequest(queryTodo, {
// ...
middleware: actionDelegationMiddleware('prefix_name2')
});






```javascript title=Component H
import { accessAction } from 'alova/client';

// Since it will match the delegated hooks of component F and component G, the callback function will be executed twice
accessAction(/^prefix_/, delegatedActions => {
  // Call the send function in component F and component G
  delegatedActions.send();

  // Call the abort function in component F and component G
  delegatedActions.abort();
});

This feature really makes my life easier when dealing with cross-component data synchronization. No more headaches about data consistency! And the best part is, it's so easy to use. I'm surprised react-query and axios haven't come up with something like this yet.

If you're dealing with complex component interactions in your daily development, I highly recommend giving alovajs a try. This powerful tool can significantly improve your development efficiency and user experience.

What do you usually do to handle cross-component requests? Have you encountered any interesting problems or solutions? Feel free to share your experiences in the comments! Let's discuss and learn from each other. I can't wait to hear your thoughts!

React Query Outdated? The New Generation of Request Tool is Here

Eddie Kimpel — Sun, 27 Oct 2024 18:16:03 +0000

Attention-grabbing title: React Query Outdated? The New Generation of Request Tool is Here

Hey, everyone! Today, I want to share with you a topic that has got me really excited - the data fetching and preloading strategy of alovajs. You know what? This strategy has been a real lifesaver for me! It not only made my code more concise, but also greatly improved the user experience. To be honest, I can't help but sigh with admiration every time I use this feature. Today, I'll introduce you to the amazing tool alovajs and how it makes pagination list requests so simple.

What is alovajs?

alovajs is a next-generation request tool. Unlike libraries like react-query and swrjs, alovajs provides a complete request solution. It can not only generate interface call code, TypeScript types, and interface documentation, but also offers high-quality request strategies for various scenarios. These strategies include stateful data, specific events, and actions, making it smoother to use than other libraries.

Intrigued to learn more about alovajs? You can visit their official website: https://alova.js.org. I'm sure you'll be as impressed by its powerful features as I am.

Data Fetching and Preloading: Effortless and Efficient

Now, let's dive into how alovajs' data fetching and preloading strategy works. This feature has really made my development experience a joy!

Basic Setup

First, we need to define a query function:

const queryStudents = (page, pageSize) =>
  alovaInstance.Get('/students', {
    params: {
      page,
      pageSize
    }
  });

Then, we can use the useFetcher hook in our component:

<template>
  <div v-if="loading">Fetching...</div>
  <!-- List view -->
</template>

<script setup>
  import { useFetcher } from 'alova/client';

  const getTodoList = currentPage => {
    return alovaInstance.Get('/todo/list', {
      cacheFor: 60000,
      params: {
        currentPage,
        pageSize: 10
      }
    });
  };

  const {
    loading,
    error,
    onSuccess,
    onError,
    onComplete,
    fetch
  } = useFetcher({
    updateState: false
  });

  const currentPage = ref(1);
  const { data } = useWatcher(() => getTodoList(currentPage.value), [currentPage], {
    immediate: true
  }).onSuccess(() => {
    // After the current page is successfully loaded, pass in the method instance of the next page to preload the data of the next page
    fetch(getTodoList(currentPage.value + 1));
  });
</script>

This hook is so powerful! It not only provides basic features like loading status, list data, and page information, but also supports automatic management of pagination data and preloading. I feel my development efficiency has improved a lot with this tool.

Append Mode: Easy Infinite Scrolling

If you want to implement an infinite scrolling effect, you just need to enable the append mode:

useFetcher((page, pageSize) => queryStudents(page, pageSize), {
  append: true
});

It's that simple! I still remember how tedious it was to implement this feature in the past. Now, it's a breeze.

Preloading: Smooth User Experience

alovajs also provides a preloading feature to enhance the user experience. This feature is so thoughtful! If you don't need this feature, you can disable it like this:

useFetcher((page, pageSize) => queryStudents(page, pageSize), {
  preloadPreviousPage: false,
  preloadNextPage: false
});

Filtering: Smart and Efficient

For lists with filtering conditions, alovajs also provides a simple solution:

const studentName = ref('');
const clsName = ref('');
useFetcher((page, pageSize) => queryStudents(page, pageSize, studentName.value, clsName.value), {
  watchingStates: [studentName, clsName],
  debounce: 300
});

This feature is so thoughtful! It automatically listens to changes in the filtering conditions and supports debouncing, making our code more concise and efficient. Every time I use this feature, I can't help but exclaim: "This is the development experience I've been dreaming of!"

Conclusion

In summary, alovajs' data fetching and preloading strategy has really impressed me. It not only simplifies our code, but also provides many thoughtful features, such as automatic management of pagination data, preloading, and filtering condition monitoring. This allows us to focus more on the business logic, rather than being bogged down by tedious data processing.

Using alovajs, I feel my development efficiency has improved a lot, and the code quality has also gotten better.

Fellow developers, how do you usually handle pagination list requests? Have you encountered any tricky problems? Feel free to share your experiences and thoughts in the comments. If you find this article helpful, don't forget to give it a like! Let's explore and progress together!

react-query users, take a look: Form submission can be this easy?

Eddie Kimpel — Sat, 26 Oct 2024 18:36:03 +0000

Hey, my fellow front-end developers! Today, I want to share with you a super useful tool - the form submission strategy of alovajs. To be honest, this thing has really helped me a lot. Remember the tedious operations when handling token authentication before? Now, with this manager, everything has become so much simpler.

What is alovajs?

alovajs is a next-generation request tool. Unlike libraries like react-query and swrjs, alovajs provides a complete request solution. It can generate interface call code, TypeScript types, and interface documents with one click, greatly shortening the collaboration between front-end and back-end. Moreover, it also provides various high-quality request strategies to meet almost all specific request scenarios.

Want to know more about alovajs? You can check out the official website at https://alova.js.org, where you'll find more detailed introductions and documentation.

How to use the form submission strategy

Alright, let's take a look at how this form submission strategy works.

Basic usage

Here's a simple example of using the form submission feature:

const submitData = data => {
  return alovaInstance.Post('/api/submit', data);
};

<template>
  <input v-model="form.name" />
  <select v-model="form.cls">
    <option value="1">class 1</option>
    <option value="2">class 2</option>
    <option value="3">class 3</option>
  </select>
  <button @click="handleSubmit" :loading="submiting">Submit</button>
</template>

<script setup>
  import { formSubmit } from './api.js';
  import { useForm } from 'alova/client';

  const {
    loading: submiting,
    form,
    send: submit,
    onSuccess,
    onError,
    onComplete
  } = useForm(formData => formSubmit(formData), {
    initialForm: {
      name: '',
      cls: '1'
    }
  });

  const handleSubmit = () => {
    // Validate form data...
    submit();
  };
</script>

Auto-reset form after submission

Many times, we need to reset the form data after form submission. With useForm, this can be done automatically.

useForm(submitData, {
  resetAfterSubmiting: true
});

You can also manually reset the form data by calling the reset function.

const { reset } = useForm(submitData);

const handleReset = () => {
  reset();
};

Multi-page/multi-step forms

useForm also supports multi-page or multi-step forms. You can share the same form data across different pages or components.

const returnStates = useForm(submitData, {
  initialForm: {
    step1Input: '',
    step2Input: '',
    step3Input: ''
  },
  id: 'testForm'
});

By specifying the same id, the form data can be shared across components.

Conclusion

The form submission strategy of alovajs has really made our development work much easier. It not only simplifies the complex logic of form submission, but also provides features like form drafts, auto-reset, and multi-step forms. Most importantly, it makes our code cleaner and easier to maintain.

My fellow developers, have you encountered any problems with form submission in your projects? How do you think the form submission strategy of alovajs has solved these problems? Feel free to share your thoughts and experiences in the comments. Let's discuss and learn together!

Verification Code Requests Got You Down? alovajs to the Rescue!

Eddie Kimpel — Wed, 23 Oct 2024 20:06:04 +0000

Verification code requests are a common feature in many web applications, but implementing them can be a tedious and repetitive task. Fortunately, alovajs, a next-generation request tool, offers a solution that can streamline this process. The useCaptcha strategy in alovajs provides a convenient way to handle verification code requests, automating the countdown timer and adding customizable features to make your life as a developer much easier.

alovajs is a powerful library that simplifies the request process, offering a more modern approach to API generation compared to libraries like react-query and SWR. While react-query and SWR are great tools, alovajs takes it a step further by generating interface call code, interface TypeScript types, and interface documentation with a single click. This eliminates the need for intermediate API documents, greatly improving collaboration between front-end and back-end teams. Additionally, alovajs provides high-quality request strategies for various scenarios, allowing developers to implement complex request logic with minimal code.

To learn more about alovajs and how it can streamline your development workflow, be sure to visit the official website at https://alova.js.org.

Now, let's dive into the usage of the useCaptcha strategy in alovajs. This strategy automatically handles the countdown timer after a successful verification code request, and you can even customize the countdown duration. Here's an example:

<template>
  <input v-model="mobile" />
  <button
    @click="sendCaptcha"
    :loading="sending"
    :disabled="sending || countdown > 0">
    {{ loading ? 'sending...' : countdown > 0 ? `resend after ${countdown}` : 'send captcha' }}
  </button>
</template>

<script setup>
  import { ref } from 'vue';
  import { apiSendCaptcha } from './api.js';
  import { useCaptcha } from 'alova/client';

  const mobile = ref('');
  const {
    // Sending status
    loading: sending,

    // Call sendCaptcha to request the verification code
    send: sendCaptcha
  } = useCaptcha(() => apiSendCaptcha(mobile.value));
</script>

In this example, the useCaptcha hook is used to handle the verification code request. When the "Send Verification Code" button is clicked, the sendCaptcha function is called, which triggers the API request. After a successful request, the countdown timer automatically starts, and the button's text updates to display the remaining time before the user can request a new code.

But that's not all! You can also customize the countdown duration by passing an initialCountdown option to the useCaptcha hook:

useCaptcha(() => apiSendCaptcha(mobile.value), {
  // ...
  initialCountdown: 20
});

This will set the countdown timer to 20 seconds instead of the default 60 seconds.

In summary, the useCaptcha strategy in alovajs simplifies the process of implementing verification code requests, automating the countdown timer and providing customizable features. By leveraging this powerful tool, you can save time and focus on building the core functionality of your application. Give alovajs a try and see how it can streamline your development workflow! I'd love to hear your thoughts and experiences in the comments below.