Appearance

Axios Plugin ​

File Information ​

  • Path: plugins/axios.js
  • Purpose: HTTP client configuration with interceptors, error handling, and rate limiting

Overview ​

The Axios plugin configures the global Axios instance used throughout the application. It adds request/response interceptors for workspace ID injection, request cancellation, rate limiting, and error handling. The plugin ensures consistent HTTP behavior across all API calls.

Key Features ​

  1. Request Interception

    • Workspace ID injection
    • Request cancellation token management
    • Rate limiting
    • Request throttling

  2. Response Interception

    • Cancel token cleanup
    • Throttle token cleanup
    • Response processing

  3. Error Handling

    • 401 authentication errors
    • Request cancellation handling
    • Custom error formatting
    • Error message extraction

Request Interceptor ​

onRequest(config) ​

Intercepts all outgoing requests:

  • Adds workspace ID to request params
  • Creates cancel token
  • Adds rate limiting
  • Adds throttling for specific endpoints

Workspace ID Injection:

  • Extracts from route params
  • Falls back to request params
  • Adds as url_workspace_id parameter

Cancel Token Management:

  • Creates cancel token for each request
  • Stores token for cancellation
  • Attaches to request config

Rate Limiting:

  • Uses enqueueRequest() from API rate limiter
  • Prevents request flooding
  • Queues requests if needed

Throttling:

  • Applies to specific endpoints (e.g., category count)
  • Prevents excessive calls
  • Uses throttle token

Response Interceptor ​

onResponse(response) ​

Intercepts all responses:

  • Removes cancel token from storage
  • Removes throttle token from storage
  • Returns response

Error Interceptor ​

onError(error) ​

Handles request errors:

  • Checks if request was cancelled
  • Handles 401 authentication errors
  • Formats error messages
  • Returns custom error object

401 Handling:

  • Clears authentication cookies
  • Triggers Nuxt error page
  • Shows session expired message

Error Format:

javascript
{
  status: number,
  message: string,
  originalError: Error
}

Cancel Token Management ​

The plugin integrates with cancelTokenManager:

  • addCancelToken(source) - Add token for cancellation
  • removeCancelToken(source) - Remove after completion
  • addThrottleToken(source) - Add for throttling
  • removeThrottleToken(source) - Remove after completion

Rate Limiting ​

Uses apiRateLimiter utility:

  • enqueueRequest() - Queues requests
  • Prevents API overload
  • Ensures fair request distribution

Usage Examples ​

Basic API Call ​

javascript
// In component
async fetchAssets() {
  try {
    const response = await this.$axios.get('/dam/assets')
    return response.data
  } catch (error) {
    // Error already formatted by plugin
    this.$snackbar.error(error.message)
  }
}

With Workspace ID ​

javascript
// Workspace ID automatically injected
const response = await this.$axios.get('/dam/assets', {
  params: {
    page: 1,
    limit: 20
    // workspace_id automatically added
  }
})

Error Handling ​

javascript
try {
  await this.$axios.post('/api/endpoint', data)
} catch (error) {
  // error.status - HTTP status code
  // error.message - Error message
  // error.originalError - Original axios error
  console.error('Request failed:', error.message)
}

Throttled Endpoints ​

Specific endpoints are throttled:

  • /digital-assets/category/get-count/ - Category count endpoint

Integration Points ​

  • Cancel Token Manager: Request cancellation
  • API Rate Limiter: Rate limiting
  • Authentication: Session management
  • Error Handling: Global error handling

Notes for Development ​

  • Plugin runs on every request automatically
  • Workspace ID is injected automatically
  • Cancel tokens prevent memory leaks
  • Rate limiting prevents API overload
  • 401 errors trigger automatic logout
  • Error format is consistent across app