ahooks-vue

import { defineComponent, ref } from 'vue'; import { useRequest } from 'ahooks-vue'; import axios from 'axios'; interface User { id: number; name: string; email: string; } const fetchUser = async (userId: number): Promise<User> => { const response = await axios.get(`https://jsonplaceholder.typicode.com/users/${userId}`); return response.data; }; export default defineComponent({ setup() { const userId = ref(1); const { data, loading, error, run } = useRequest(() => fetchUser(userId.value), { manual: true, // Prevents immediate execution on component mount onSuccess: (result) => { console.log('User fetched successfully:', result); }, onError: (err) => { console.error('Error fetching user:', err); }, }); const fetchUserData = () => run(); return { data, loading, error, fetchUserData }; }, template: ` <div style="padding: 20px; font-family: sans-serif;"> <h1>User Data with useRequest</h1> <p>This demonstrates fetching user data using ahooks-vue's useRequest hook.</p> <button @click="fetchUserData" :disabled="loading" style="padding: 10px 15px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer;"> {{ loading ? 'Loading...' : 'Fetch User (ID: 1)' }} </button> <div v-if="error" style="color: red; margin-top: 10px;">Error: {{ error.message }}</div> <div v-if="data" style="background-color: #f8f9fa; padding: 15px; border-radius: 4px; margin-top: 10px;"> <p><strong>ID:</strong> {{ data.id }}</p> <p><strong>Name:</strong> {{ data.name }}</p> <p><strong>Email:</strong> {{ data.email }}</p> </div> <div v-else-if="!loading" style="margin-top: 10px; color: #6c757d;">Click the button to fetch user data.</div> </div> ` });