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);如果面对大量的api,这工作量可想而知,想到这时就有点头疼啊。有没有一种方法可以自动帮我处理这些逻辑,让请求代码看起来更简洁呢?
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 }; }这是一个最简单的use hook实现,它帮我们解决了请求模板代码的问题。当然你还可以使用use hook封装更多更高级的请求功能,而这些功能现在不必你自己封装了,使用alova就可以了。
<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, // 设置使用axios作为请求工具 requestAdapter: axiosRequestAdapter() }); const { // 加载状态 loading, // 堆代码 duidaima.com // 响应数据 data, // 错误信息,请求错误时才有值 error } = useRequest(alovaInstance.Get('/todoList')); </script>是不是非常nice!!!之前需要我们自己实现的各种功能,alova 都帮我们做了。alova在过去3个月对外发布以来在github上已收到了 1500+star,我们需要您宝贵的star支持。目前,alova已经创新性地实现了在vue options中完美使用,也就是在vue2 options写法中也可以使用use hook了。
所以,在你的下一个项目中,你也可以来试试 alova,一定能给你带来更愉快的开发体验!
参考资料
[1]https://alova.js.org: https://link.juejin.cn?target=https%3A%2F%2Falova.js.org
[2]https://alova.js.org/tutorial/example/init-page: https://link.juejin.cn?target=https%3A%2F%2Falova.js.org%2Ftutorial%2Fexample%2Finit-page
[3]https://github.com/alovajs/alova: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Falovajs%2Falova
[4]https://alova.js.org/zh-CN/tutorial/framework/vue-options: https://link.juejin.cn?target=https%3A%2F%2Falova.js.org%2Fzh-CN%2Ftutorial%2Fframework%2Fvue-options
[5]https://alova.js.org/: https://link.juejin.cn?target=https%3A%2F%2Falova.js.org%2F
[6]https://github.com/alovajs/alova: https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Falovajs%2Falova