如何在Vue中创建类似Angular风格的服务？附相关代码示例

Hey Dylan, let's walk through how to fix and improve your Angular-style service in Vue, plus how to use it properly in your component.

First: Fix the Async Logic in Your API Service #

The biggest issue with your current get() method is that it doesn't return the axios Promise—so when you call it from your component, you'll never get the actual email data. Let's clean this up, plus add proper error handling and a complete update() method:

import axios from 'axios';

export default {
  // Use async/await for cleaner async code (or return the Promise chain directly)
  async get() {
    try {
      const response = await axios.get('/emails');
      return response.data.data;
    } catch (error) {
      console.error('Failed to fetch emails:', error);
      // Throw the error so the component can handle it (instead of silently returning it)
      throw error;
    }
  },

  // Complete update method with dynamic ID and request body
  async update(emailId, updatedData) {
    try {
      const response = await axios.put(`/emails/${emailId}`, updatedData);
      return response.data;
    } catch (error) {
      console.error('Failed to update email:', error);
      throw error;
    }
  }
};

Second: Properly Use the Service in Your Vue Component #

You had a typo in your import (EmaiMessageS... → EmailMessageService) and were missing logic to actually fetch and display the data. Let's fix that, plus add loading/error states for better UX:

<template>
  <div class="col-md-7 pt-5 pr-2 pb-5 pl-5">
    <!-- Show loading state while fetching -->
    <div v-if="isLoading">Loading emails...</div>
    
    <!-- Show error if request fails -->
    <div v-else-if="error" class="text-danger">
      Failed to load emails: {{ error.message }}
    </div>
    
    <!-- Show emails once loaded -->
    <div v-else>
      <!-- For better readability, replace {{emails}} with a proper list -->
      <div v-for="email in emails" :key="email.id" class="email-item">
        <h5>{{ email.subject }}</h5>
        <p>{{ email.preview }}</p>
        <button @click="handleUpdateEmail(email.id, { read: true })">
          Mark as Read
        </button>
      </div>
    </div>
  </div>
</template>

<script>
// Fix the import path/spelling
import EmailMessageService from '../../services/EmailMessageService';

export default {
  data() {
    return {
      emails: [],
      isLoading: false,
      error: null
    };
  },

  // Fetch emails when the component mounts
  async mounted() {
    this.isLoading = true;
    try {
      this.emails = await EmailMessageService.get();
    } catch (err) {
      this.error = err;
    } finally {
      this.isLoading = false;
    }
  },

  methods: {
    // Example: Call the update service method
    async handleUpdateEmail(emailId, updateData) {
      try {
        const updatedEmail = await EmailMessageService.update(emailId, updateData);
        // Update local state to reflect the change
        this.emails = this.emails.map(email => 
          email.id === emailId ? updatedEmail : email
        );
      } catch (err) {
        alert('Failed to update email');
        console.error(err);
      }
    }
  }
};
</script>

Third: Vue Service Best Practices (Angular-Style) #

Since you're aiming for Angular-like service patterns, here are some tips to make your services more robust:

• Singleton by default: Since you're exporting a plain object, every import of your service will use the same instance—just like Angular's singleton services. Perfect for sharing API logic across components.
• Encapsulate axios: Create a reusable axios instance with base URL, auth tokens, and interceptors (for global error handling or request headers) instead of using raw axios in each service. Example:

  // services/axiosInstance.js
  import axios from 'axios';
  const api = axios.create({ baseURL: '/api' });
  
  // Add auth token to all requests
  api.interceptors.request.use(config => {
    const token = localStorage.getItem('authToken');
    if (token) config.headers.Authorization = `Bearer ${token}`;
    return config;
  });
  
  export default api;
  

  Then import this instance into your EmailMessageService instead of raw axios.
• Single responsibility: Keep each service focused on one resource (e.g., EmailMessageService only handles email-related API calls) to keep code organized.
• Delegate error handling: Let components handle user-facing errors (like alerts or toasts) while services log technical details and throw errors up the chain.

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