React中发起API调用的服务类是否应使用静态方法？实例化或单例哪种更合适？

Great question! Let’s break this down based on common React/JavaScript development practices—your intuition about static methods being a solid choice is totally on point.

Static Methods: The Best Pick When No Instance State Is Needed #

If your service class doesn’t need to maintain any instance-specific state (think: no dynamic request configs, per-instance auth tokens, or unique client instances to track), static methods are the way to go.

You’re right that they’re cleaner—no need to instantiate a class just to call a method, so you skip unnecessary object creation overhead. Code-wise, it’s straightforward too: just call ProductService.getAllProducts() directly.

Here’s a quick example:

class ProductService {
  static async getAllProducts() {
    const response = await fetch('/api/products');
    return response.json();
  }

  static async getProductById(productId) {
    const response = await fetch(`/api/products/${productId}`);
    return response.json();
  }
}

// Usage in a component
const loadProducts = async () => {
  const products = await ProductService.getAllProducts();
  // Do something with products
};

Instances: Only Useful When You Need Per-Instance State #

Instantiating a service makes sense if you need to maintain state that’s unique to each instance. For example:

• You need different base API URLs for dev/prod environments
• Each instance uses a custom HTTP client with unique interceptors or headers

Here’s how that might look:

class ProductService {
  constructor(baseApiUrl) {
    this.baseUrl = baseApiUrl;
  }

  async getAllProducts() {
    const response = await fetch(`${this.baseUrl}/products`);
    return response.json();
  }
}

// Create separate instances for different environments
const devProductService = new ProductService('https://dev.your-api.com');
const prodProductService = new ProductService('https://prod.your-api.com');

Singletons: A Middle Ground for Shared Global State #

Singletons come into play when you need shared state across your app but only want one instance of the service. For example, a service that manages a global auth token or a shared HTTP client with global interceptors.

That said, in React (and modern JS), you don’t need a fancy singleton class pattern—ES modules are inherently singletons, so you can just export a plain object with methods and shared state:

// productService.js
const ProductService = {
  authToken: null,

  setAuthToken(token) {
    this.authToken = token;
  },

  async getAllProducts() {
    const response = await fetch('/api/products', {
      headers: { Authorization: `Bearer ${this.authToken}` }
    });
    return response.json();
  }
};

export default ProductService;

This works exactly like a singleton, but with less boilerplate.

Final Thought #

Your preference for static methods is totally justified when there’s no instance-specific state to track. It’s the most efficient and concise approach. Reserve instances for when you need unique per-service state, and use module-level objects (instead of formal singletons) if you need shared global state.

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