Vue.js中独立Axios服务的响应数据获取方案问询

Nice move extracting your Axios logic into a dedicated service—it's a great practice for keeping components clean and code reusable! Let's walk through how to get data from those Promises in your components, plus some alternative approaches to consider.

Since all your UserService methods return Promises (Axios calls are Promises, and your .then()/.catch() chains also return Promises), you can use either async/await (cleaner, more readable) or .then() chains in your Vue components to access the response data.

1. Using async/await in Components #

This is the preferred approach for most cases because it makes asynchronous code look synchronous. Here's how to implement it:

<script>
import UserService from './UserService';

export default {
  data() {
    return {
      currentUser: null,
      userTasks: null,
      isLoading: false,
      fetchError: null
    };
  },
  async created() {
    this.isLoading = true;
    try {
      // Get user data (your service already returns response.data here)
      this.currentUser = await UserService.getUser();
      
      // Get tasks (your service returns the full Axios response, so we grab .data)
      const tasksResponse = await UserService.getUserTasks();
      this.userTasks = tasksResponse.data;
    } catch (err) {
      this.fetchError = err;
      console.error('Failed to load user data:', err);
      // Add user-friendly error messaging here if needed
    } finally {
      this.isLoading = false;
    }
  }
};
</script>

<template>
  <div v-if="isLoading">Loading user data...</div>
  <div v-else-if="fetchError">Oops, something went wrong: {{ fetchError.message }}</div>
  <div v-else>
    <h1>Welcome, {{ currentUser.name }}!</h1>
    <h2>Your Tasks:</h2>
    <ul>
      <li v-for="task in userTasks" :key="task.id">{{ task.title }}</li>
    </ul>
  </div>
</template>

2. Using .then() Chains #

If you prefer traditional Promise syntax, this works just as well:

<script>
import UserService from './UserService';

export default {
  data() {
    return {
      currentUser: null,
      userTasks: null,
      isLoading: false,
      fetchError: null
    };
  },
  created() {
    this.isLoading = true;
    
    UserService.getUser()
      .then(userData => {
        this.currentUser = userData;
        return UserService.getUserTasks();
      })
      .then(tasksResponse => {
        this.userTasks = tasksResponse.data;
      })
      .catch(err => {
        this.fetchError = err;
        console.error('Failed to load data:', err);
      })
      .finally(() => {
        this.isLoading = false;
      });
  }
};
</script>

Critical Fix for Your UserService #

Right now, your .catch() blocks in the service only log errors but don't rethrow them. This means your component's error handling (whether in try/catch or .catch()) won't trigger because the error is "swallowed". Fix this by rethrowing the error:

// UserService.js
class UserService {
  getUser() {
    const token = localStorage.getItem('token');
    return axios.get('/api/user', {
      headers: {
        'Authorization': 'Bearer ' + token
      }
    }).then(function (response) {
      return response.data;
    }).catch(function (error) {
      console.log(error);
      throw error; // Re-throw so components can handle the error
    });
  }

  getUserTasks() {
    const token = localStorage.getItem('token');
    return axios.get('/api/user/task', {
      headers: {
        'Authorization': 'Bearer ' + token
      }
    }).then(response => {
      return response;
    }).catch(function (error) {
      console.log(error);
      throw error; // Same fix here
    });
  }

  get currentUser() {
    return this.getUser();
  }
}
export default new UserService();

If you want to go beyond basic component-level data fetching, here are two popular patterns:

1. State Management (Pinia/Vuex) #

Use a state management library like Pinia (Vue's official replacement for Vuex) to store user data globally. This is ideal if multiple components need access to the same user data without re-fetching it.

Example with Pinia: #

First, create a store:

// stores/userStore.js
import { defineStore } from 'pinia';
import UserService from '../UserService';

export const useUserStore = defineStore('user', {
  state: () => ({
    currentUser: null,
    userTasks: null,
    isLoading: false,
    error: null
  }),
  actions: {
    async fetchCurrentUser() {
      this.isLoading = true;
      this.error = null;
      try {
        this.currentUser = await UserService.getUser();
      } catch (err) {
        this.error = err;
        console.error('Failed to fetch user:', err);
      } finally {
        this.isLoading = false;
      }
    },
    async fetchUserTasks() {
      this.isLoading = true;
      this.error = null;
      try {
        const response = await UserService.getUserTasks();
        this.userTasks = response.data;
      } catch (err) {
        this.error = err;
        console.error('Failed to fetch tasks:', err);
      } finally {
        this.isLoading = false;
      }
    }
  }
});

Then use it in a component:

<script setup>
import { useUserStore } from './stores/userStore';
import { onMounted } from 'vue';

const userStore = useUserStore();

onMounted(async () => {
  await userStore.fetchCurrentUser();
  await userStore.fetchUserTasks();
});
</script>

<template>
  <div v-if="userStore.isLoading">Loading...</div>
  <div v-else-if="userStore.error">Error: {{ userStore.error.message }}</div>
  <div v-else>
    <h2>Hello, {{ userStore.currentUser.name }}</h2>
    <ul v-if="userStore.userTasks">
      <li v-for="task in userStore.userTasks" :key="task.id">{{ task.title }}</li>
    </ul>
  </div>
</template>

2. Composables (Reusable Fetch Logic) #

If you don't need global state but want to reuse fetch logic across multiple components, create a Vue composable. This keeps components lean and centralizes your fetch logic.

Example Composable: #

// composables/useUser.js
import { ref, onMounted } from 'vue';
import UserService from '../UserService';

export function useUser() {
  const currentUser = ref(null);
  const userTasks = ref(null);
  const isLoading = ref(false);
  const error = ref(null);

  const fetchCurrentUser = async () => {
    isLoading.value = true;
    error.value = null;
    try {
      currentUser.value = await UserService.getUser();
    } catch (err) {
      error.value = err;
      console.error('Failed to fetch user:', err);
    } finally {
      isLoading.value = false;
    }
  };

  const fetchUserTasks = async () => {
    isLoading.value = true;
    error.value = null;
    try {
      const response = await UserService.getUserTasks();
      userTasks.value = response.data;
    } catch (err) {
      error.value = err;
      console.error('Failed to fetch tasks:', err);
    } finally {
      isLoading.value = false;
    }
  };

  return {
    currentUser,
    userTasks,
    isLoading,
    error,
    fetchCurrentUser,
    fetchUserTasks
  };
}

Use it in a component:

<script setup>
import { useUser } from './composables/useUser';
import { onMounted } from 'vue';

const { currentUser, userTasks, isLoading, error, fetchCurrentUser, fetchUserTasks } = useUser();

onMounted(async () => {
  await fetchCurrentUser();
  await fetchUserTasks();
});
</script>

<template>
  <div v-if="isLoading">Loading user info...</div>
  <div v-else-if="error">Something went wrong: {{ error.message }}</div>
  <div v-else>
    <h1>Welcome back, {{ currentUser.name }}!</h1>
    <h3>Your To-Dos:</h3>
    <ul>
      <li v-for="task in userTasks" :key="task.id">{{ task.title }}</li>
    </ul>
  </div>
</template>

• Stick with async/await over .then() chains for readability, especially with multiple sequential requests.
• Always handle errors properly—don't just log them; inform the user or take corrective action.
• Choose state management or composables based on whether you need to share data across components or just reuse fetch logic.

内容的提问来源于stack exchange，提问作者Nick Synev