如何在Request.js中全局处理Axios Promise错误，避免调用时写catch()？

Hey there! Let's fix this properly—adding empty .catch() calls everywhere is definitely a messy workaround, and we can handle all errors centrally in your Request.js file so you never have to worry about uncaught promise errors again.

The Core Issue #

When Axios gets a 400 (or any error status code), it rejects the promise. If you don't catch that rejection somewhere, the browser will throw that "Uncaught (in promise)" error. The solution is to catch and handle the error at the Axios instance level, then return a resolved promise so external calls don't need to handle rejection.

Step-by-Step Solution #

Here's how to set this up in your Request.js using Axios interceptors:

// Request.js
import axios from 'axios';

// Create a custom Axios instance
const api = axios.create({
  baseURL: '/your-api-base-url', // Replace with your actual base URL
});

// Add a response interceptor to handle ALL errors centrally
api.interceptors.response.use(
  // Handle successful responses
  (response) => {
    // You can format successful data here if needed
    return response.data;
  },
  // Handle ALL errors
  (error) => {
    // 1. Log or process the error based on status code
    if (error.response) {
      // Server returned an error response
      const { status, data } = error.response;
      
      console.error(`Request failed with status ${status}:`, data);
      
      // Add custom handling for specific status codes
      switch (status) {
        case 400:
          alert(data.errorMessage || 'Invalid request'); // Show user-friendly message
          break;
        case 401:
          // Redirect to login page if unauthorized
          window.location.href = '/login';
          break;
        // Add more cases as needed
      }
    } else if (error.request) {
      // Request was sent but no response was received
      console.error('No response from server:', error.request);
      alert('Could not connect to the server. Please try again later.');
    } else {
      // Error setting up the request
      console.error('Request setup failed:', error.message);
    }

    // 2. Critical: Return a RESOLVED promise to avoid uncaught rejection
    // You can return null, an error object, or a status flag—whatever fits your needs
    return Promise.resolve({
      success: false,
      error: error.response?.data || error.message,
    });
  }
);

export default api;

How This Works #

• The response interceptor catches every error (400, 401, network failures, etc.) before it reaches your component code.
• We handle the error (log it, show user alerts, redirect, etc.) right in Request.js.
• By returning Promise.resolve(...), we convert the rejected promise into a resolved one. This means when you call the request function elsewhere, you don't need to add a .catch()—the promise will never throw an uncaught error.

Example Usage in Somewhere.js #

Now you can call your request without any catch, and optionally handle success/failure if needed:

// Somewhere.js
import api from './Request.js';

// Using .then()
api.get('/your-endpoint')
  .then(result => {
    if (result.success) {
      // Handle successful data
      console.log('Data:', result);
    } else {
      // Optional: If you need component-specific error logic (not required)
      console.log('Error already handled centrally:', result.error);
    }
  });

// Or using async/await
const fetchData = async () => {
  const result = await api.post('/another-endpoint', { data: 'test' });
  if (result.success) {
    // Do something with the data
  }
};
fetchData();

Alternative: Wrapped Request Functions #

If you prefer a more explicit approach, you can wrap Axios methods in async functions with try/catch:

// Request.js
export const get = async (url, config) => {
  try {
    const response = await api.get(url, config);
    return { success: true, data: response.data };
  } catch (error) {
    // Same error handling logic as above
    console.error(error);
    return { success: false, error: error.response?.data || error.message };
  }
};

// Usage in Somewhere.js
import { get } from './Request.js';

const data = await get('/endpoint');
if (data.success) {
  // Use data
}

This achieves the same goal: no uncaught promise errors, and all error handling stays in Request.js.

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