Request problems in actual scenarios

As a front-end development, network requests are definitely something we often encounter. Among front-end requests, axios and fetch API should be our most commonly used request tools. They are simple enough to send requests and receive response data.
But in actual projects, in order to achieve a better user experience, we also need to consider the following factors:

1. Display the loading request status
2. Display request error status
3. Display progress information of uploading/downloading files All of the above require us to write additional code, which increases a lot of workload. Your request code may be as follows. We use vue3 code as an example.

const loading = ref(false);
const data = ref({});
const error = ref(null);
const request = async () => {
 try {
 loading.value = true;
 data.value = await axios.get('/xxx');
 } catch (e) {
 error.value = e;
 }
 loading.value = false;
};
onMounted(request);

If you are encountered with a large number of APIs, the workload can be imagined, and it will give you a headache just thinking about it. Is there a way to automatically handle this logic for me and make the request code look more concise?

How to solve this

We can use the idea of encapsulation to encapsulate all the above into a simple use hook, which can be solved very well. The encapsulated code is probably as follows.

export const useRequest = (url) => {
 const loading = ref(false);
 const data = ref({});
 const error = ref(null);
 const request = async () => {
 try {
 loading.value = true;
 data.value = await axios.get(url);
 } catch (e) {
 error.value = e;
 }
 loading.value = false;
 }
 onMounted(request);
return {
 loading,
 data,
 error
 };
}

This is the simplest implementation of use hook, which helps us solve the problem of requesting template code. Of course, you can also use use hook to encapsulate more advanced request functions. Now you don't need to encapsulate these functions yourself. Just use alova.

*alova is a lightweight request strategy library that uses corresponding request modules for different request scenarios such as paging requests, form submissions, uploading and downloading files, etc., allowing developers to achieve high availability and high fluency with a very small amount of code. It has a comprehensive request function, which means that you no longer need to rack your brains to write request optimization code, and you no longer need to maintain request data and related status yourself. You only need to select and use the request module. After setting the parameters, alova will help You got it! *

After introducing alova, my work efficiency directly increased by 3 times. I highly recommend it to everyone.
You can think of alova as a weapon for request tools such as axios or fetch-api. Using alova in conjunction with request tools will make them more powerful.

In fact, the bottom layer of alova still relies on request functions such as axios or fetch-api for requests, so you can still use your favorite request library.

The following is a usage example based on vue3+axios+alova. Alova will automatically create request-related responsive states for you that can be directly used for views. The code is as follows:

Click here to view a runnable example

<template>
 <div v-if="loading">Loading…</div>
 <div v-else-if="error">{{ error.message }}</div>
 <span v-else>responseData: {{ data }}</span>
</template>
<script setup>
import { createAlova, useRequest } from 'alova';
import VueHook from 'alova/vue';
import { axiosRequestAdapter } from '@alova/adapter-axios';
const alovaInstance = createAlova({
 statesHook: VueHook,
 // Set up to use axios as the request tool
 requestAdapter: axiosRequestAdapter()
});
const {
 // loading status
 loading,
// response data
 data,
// Error information, only has value when request error
 error
} = useRequest(alovaInstance.Get('/todoList'));
</script>

Isn't it very nice! ! ! Alova has done all the functions that we needed to implement ourselves before.

Summarize

alova currently provides 8 request strategies. If you want to easily implement specific request requirements in different request scenarios, don't miss it. alova also provides cache management, request sharing and more functions, which can cover most request scenarios.

Therefore, in your next project, you can also try alova, which will definitely bring you a more pleasant development experience!

We really need your star

If you like alova. we are very appreciate your star at Github. it's a approval and encourage of our work.

End

Currently, alova can be perfectly used in vue options (vue2 and vue3). Click here to view details. The following frameworks will be supported in the future:

• Functional style, such as solid/preact/qwik.
• Class style, such as angular/lit/stencil.
• Options style, such as mini program(China).

if you find it useful, please give it a like or save it!

Related information

alova official website

alova Github repository