Building Client-Server Interaction Layer

tip

This is a practical experience summarized by using alova in depth. Please make sure you have mastered the content of the alova basics section before reading. You can also watch the 5-minute quick start video.

You can combine various features of alova to implement the Client-Server Interaction Layer(CSIL) of your application. The CSIL will manage your response data and the responsive states created by useHooks. They will establish a mapping relationship in the CSIL through method instances, thereby eliminating the limitation of component hierarchy. You can access, modify and refresh the data of the CSIL through method instances in any UI component, and call the actions of useHooks.

Let's see what benefits the CSIL can bring us.

Request point separation

In traditional practice, when a page is divided into multiple components, we need to request data from the root node and distribute it to the subcomponents, which undoubtedly increases the complexity of data transmission.

Now, you can initiate the same request in different components, and the CSIL will merge the requests and distribute the data to these components.

Let's take a closer look at the sample code.

vue

PageRoot.vue

<template>
  <profile></profile>
  <assets></assets>
</template>

<script setup>
  import Profile from './component/profile.vue';
  import Assets from './component/assets.vue';
</script>

./component/profile.vue

<template>
  <div v-if="loading">loading...</div>
  <div v-else>
    <p>name: {{ data.name }}</p>
    <p>age: {{ data.age }}</p>
  </div>
</template>

<script setup>
  import { useRequest } from 'alova/client';
  const { loading, data } = useRequest(alova.Get('/api/user'));
</script>

./component/assets.vue

<template>
  <div>
    <div v-if="loading">loading...</div>
    <div v-else>
      <p>balance: {{ data.balance }}</p>
      <p>coins: {{ data.coins }}</p>
    </div>
  </div>
</template>

<script setup>
  import { useRequest } from 'alova/client';
  const { loading, data } = useRequest(alova.Get('/api/user'));
</script>

react

PageRoot.jsx

import Profile from './component/profile';
import Assets from './component/assets';

const App = () => {
  return (
    <>
      <profile></profile>
      <assets></assets>
    </>
  );
};

./component/profile.jsx

import { useRequest } from 'alova/client';

const Profile = () => {
  const { loading, data } = useRequest(alova.Get('/api/user'));
  return loading ? (
    <div>loading...</div>
  ) : (
    <div>
      <p>name: {data.name}</p>
      <p>age: {data.age}</p>
    </div>
  );
};

./component/assets.jsx

import { useRequest } from 'alova/client';

const Assets = () => {
  const { loading, data } = useRequest(alova.Get('/api/user'));
  return loading ? (
    <div>loading...</div>
  ) : (
    <div>
      <p>balance: {data.balance}</p>
      <p>coins: {data.coins}</p>
    </div>
  );
};

svelte

PageRoot.svelte

<script>
  import Profile from './component/profile.svelte';
  import Assets from './component/assets.svelte';
</script>

<profile></profile>
<assets></assets>

./component/profile.svelte

<script>
  import { useRequest } from 'alova/client';
  const { loading, data } = useRequest(alova.Get('/api/user'));
</script>

{#if $loading}
<div>loading...</div>
{#else}
<div>
  <p>name: {$data.name}</p>
  <p>age: {$data.age}</p>
</div>
{/if}

./component/assets.svelte

<script>
  import { useRequest } from 'alova/client';
  const { loading, data } = useRequest(alova.Get('/api/user'));
</script>

{#if $loading}
<div>loading...</div>
{#else}
<div>
  <p>balance: {$data.balance}</p>
  <p>coins: {$data.coins}</p>
</div>
{/if}

Responsive states centralized management

Since responsive states is managed in the CSIL, you can quickly update or refresh them across components. For example, you can use it in the following scenarios:

• Update list after adding/editing list items
• Notify the previous page to refresh data in the App
• Refresh the menu bar after editing permissions

Update states across components

Use updateState and pass in a method instance to implement cross-component update responsive state. In addition, you can also let the CS interaction layer manage custom states to allow custom states to support cross-component updates.

Refresh data across components

There are two ways to refresh data across components.

• Pass in a method instance through useFetcher, which will re-request data and update the responsive states corresponding to this method instance.
• Cross-component triggering of useHooks actions to complete data refresh, please refer to action delegation middleware for details

Centralized management of response data

When response data caching is enabled, the CSIL will cache response data according to certain rules, and the same request will reuse cached data to improve performance. For details, please refer to the Response Cache section. In addition, you can also predict the data that the user will access next, use useFetcher to pre-request the data and put it in the cache.

Cache timeliness

There is a question that everyone is very concerned about, how to ensure the timeliness of the cache? Alova also provides a variety of ways to handle the timeliness of the cache.

• Automatic Invalidation: Automatically invalidate the specified cache by setting invalidation rules.
• Cache Penetration: For data with high timeliness, you can obtain the latest data through forced requests.
• Scheduled update: Use useAutoRequest to automatically update data in different scenarios.
• Manual invalidation: If none of the above methods are suitable, you can manually call the invalidation function.