Migrate from axios
Benefits of this migration guide:
-
Minimal changes: You only need to create an Alova instance, and other code can be changed slowly.
-
Gradual migration: You can migrate one interface at a time without having to rewrite all the code at once.
-
Maintain consistency: Use the existing axios instance, and the original configuration and interceptor are still valid.
-
Coexistence of the old and the new: During the migration process, axios and Alova can be used at the same time without affecting each other.
Migration steps
1. Install the package
First, install alova and its axios adapter:
# npm
npm install alova @alova/adapter-axios
# yarn
yarn add alova @alova/adapter-axios
# pnpm
pnpm install alova @alova/adapter-axios
2. Create an alova instance
Use your existing axios instance to create an alova instance:
import { createAlova } from 'alova';
import { axiosRequestAdapter } from '@alova/adapter-axios';
import axiosInstance from './your-axios-instance'; // your existing axios instance
const alovaInst = createAlova({
statesHook, // VueHook / ReactHook / SvelteHook
requestAdapter: axiosRequestAdapter({
axios: axiosInstance
})
});
3. Keep the existing code unchanged
For the parts that you don't want to change for the time being, continue to use the original axios method without any changes.
Now, you can use the method instance of alova.
const getUser = id => alovaInst.Get(`/user/${id}`);
// Use in components
const { loading, data, error } = useRequest(getUser(userId));
4. Gradually migrate requests
If you pursue a unified user experience, you can also gradually rewrite axios requests to alova requests. Just replace methods such as axios.get
and axios.post
with alovaInst.Get
and alovaInst.Post
.
// Original get request
const todoList = id => axios.get('/todo');
// After change
const todoList = id => alovaInst.Get('/todo');
// Original post request
const todoList = data =>
axios.post('/todo', data, {
responseType: 'json',
responseEncoding: 'utf8'
});
// After change
const todoList = data =>
alovaInst.Post('/todo', data, {
responseType: 'json',
responseEncoding: 'utf8'
});