Fetch Data
use hook
When you have the following needs:
- Preload the data that will be used in subsequent processes and store it in the cache, so that users no longer have to wait for the data loading process;
- Conveniently implement cross-page data update (similar to global state), for example, modify an item in the todo list and then re-fetch the latest data, and the interface will be refreshed after the response.
useFetcher
is the hook used to implement the above scenario. The response data obtained through it cannot be received directly, but the data fetched through it will not only update the cache, but also update the corresponding state, thereby re-rendering the view.
Preload data
Let's implement a paging list to automatically preload the next page of data. Before preloading data, please make sure that the Method instance used has enabled caching.
- vue
- react
- svelte
- solid
<template>
<div v-if="loading">Fetching...</div>
<!-- List view -->
</template>
<script setup>
import { useFetcher } from 'alova/client';
//method instance creation function
const getTodoList = currentPage => {
return alovaInstance.Get('/todo/list', {
cacheFor: 60000,
params: {
currentPage,
pageSize: 10
}
});
};
const {
// the loading is the status of data fetching
loading,
error,
onSuccess,
onError,
onComplete,
// Only after calling fetch will a request be sent to fetch data. You can call fetch repeatedly to fetch data from different interfaces.
fetch
} = useFetcher({
updateState: false
});
const currentPage = ref(1);
const { data } = useWatcher(() => getTodoList(currentPage.value), [currentPage], {
immediate: true
}).onSuccess(() => {
// After the current page is loaded successfully, pass in the method instance of the next page to pre-fetch the data of the next page.
fetch(getTodoList(currentPage.value + 1));
});
</script>
import { useState } from 'react';
import { useFetcher } from 'alova/client';
//method instance creation function
const getTodoList = currentPage => {
return alovaInstance.Get('/todo/list', {
cacheFor: 60000,
params: {
currentPage,
pageSize: 10
}
});
};
const App = () => {
const {
// the loading is the status of data fetching
loading,
error,
onSuccess,
onError,
onComplete,
// Only after calling fetch will a request be sent to fetch data. You can call fetch repeatedly to fetch data from different interfaces.
fetch
} = useFetcher({
updateState: false
});
const [currentPage, setCurrentPage] = useState(1);
const { data, onSuccess } = useWatcher(() => getTodoList(currentPage), [currentPage], {
immediate: true
}).onSuccess(() => {
// After the current page is loaded successfully, pass in the method instance of the next page to pre-fetch the data of the next page.
fetch(getTodoList(currentPage + 1));
});
return (
<>
{loading ? <div>Fetching...</div> : null}
{/* list view */}
</>
);
};
<script>
import { writable } from 'svelte/store';
import { useFetcher } from 'alova/client';
//method instance creation function
const getTodoList = currentPage => {
return alovaInstance.Get('/todo/list', {
cacheFor: 60000,
params: {
currentPage,
pageSize: 10
}
});
};
const {
// the loading is the status of data fetching
loading,
error,
onSuccess,
onError,
onComplete,
// Only after calling fetch will a request be sent to fetch data. You can call fetch repeatedly to fetch data from different interfaces.
fetch
} = useFetcher({
updateState: false
});
const currentPage = writable(1);
const { data, onSuccess } = useWatcher(() => getTodoList($currentPage), [currentPage], {
immediate: true
}).onSuccess(() => {
// After the current page is loaded successfully, pass in the method instance of the next page to pre-fetch the data of the next page.
fetch(getTodoList($currentPage + 1));
});
</script>
{#if loading}
<div>Fetching...</div>
{/if}
<!-- List view -->
import { createSignal } from 'solid-js';
import { useFetcher } from 'alova/client';
// method instance creation function
const getTodoList = currentPage => {
return alovaInstance.Get('/todo/list', {
cacheFor: 60000,
params: {
currentPage,
pageSize: 10
}
});
};
const App = () => {
const {
// loading indicates the status of sending a pull request
loading,
error,
onSuccess,
onError,
onComplete,
// Only after calling fetch will a request be sent to pull data. You can call fetch repeatedly to pull data from different interfaces
fetch
} = useFetcher({
updateState: false
});
const [currentPage, setCurrentPage] = createSignal(1);
const { data } = useWatcher(() => getTodoList(currentPage()), [currentPage], {
immediate: true
}).onSuccess(() => {
// After the current page is loaded successfully, pass the method instance of the next page to pre-fetch the data of the next page
fetch(getTodoList(currentPage() + 1));
});
return (
<>
{loading() ? <div>Fetching...</div> : null}
{/* List view */}
</>
);
};
The above example is set updateState
to false when calling useFetcher
. This is because the data fetching will automatically trigger a states cross-component updating by default, causing the view to be re-rendered. When preload data is the same as the currently requested data. You can set it to false to avoid affecting view errors.
Update views across modules/components
Next, we will modify a todo data and re-fetch the latest todo list data to update the view. We may not know which page the todo list is currently on. In this case, when using the fetch
function, we can use Method snapshots matcher to dynamically fetch the data of the current page.
The Method snapshots matcher is used to find method instances that meet the conditions among the requested method instances.
First, set a name for the method instance in the todo list, which is used to filter out the required Method instance when the Method instance cannot be specified directly.
const getTodoList = currentPage => {
return alovaInstance.Get('/todo/list', {
name: 'todoList',
params: {
currentPage,
pageSize: 10
}
});
};
Then in the EditTodo
component, use the fetch
function to dynamically find the last name of todoList
in the requested Method instance to fetch data.
const { fetch } = useFetcher();
// Trigger data fetch in event
const handleSubmit = () => {
// submit data...
const lastMethod = alovaInstance.snapshots.match({
name: 'todoList',
filter: (method, index, ary) => {
// Return true to specify the Method instance that needs to be fetched
return index === ary.length - 1;
}
}, true);
if (lastMethod) {
await fetch(lastMethod);
}
};
useFetcher only updates the cache after the request is completed, and if this Method is foundIf the instance has been requested using useHook before, the data
state created by this useHook will also be updated to ensure that the page data is consistent. This is the guarantee that useFetcher
is used to update views across modules/components.
For more methods of using
Method
instance matcher, see Method instance matcher.
Force sending request
Same as useRequest
and useWatcher
, please read Force Request for more information.