ApiService

Overview

ApiService is the HTTP request management system in Now.js Framework. It supports REST API calls, caching, and error handling.

When to use:

• Need to make API calls
• Need REST operations (GET, POST, PUT, DELETE)
• Need request caching
• Need automatic retry

Why use it:

• ✅ Simple REST API interface
• ✅ Automatic JSON handling
• ✅ Request/Response interceptors
• ✅ Caching support
• ✅ Error normalization
• ✅ Auth token integration

Basic Usage

GET Request

const response = await ApiService.get('/api/users');
console.log(response.data);

POST Request

const user = await ApiService.post('/api/users', {
  name: 'John',
  email: 'john@example.com'
});

PUT Request

await ApiService.put('/api/users/1', {
  name: 'John Updated'
});

DELETE Request

await ApiService.delete('/api/users/1');

Configuration

ApiService.init({
  baseUrl: '/api/v1',

  timeout: 30000,  // 30 seconds

  headers: {
    'Content-Type': 'application/json'
  },

  cache: {
    enabled: true,
    ttl: 300000  // 5 minutes
  }
});

API Reference

ApiService.get(url, params?, options?)

GET request

Returns: Promise<Object>

const users = await ApiService.get('/users', {
  params: { page: 1, limit: 10 }
});
// GET /users?page=1&limit=10

ApiService.post(url, data, options?)

POST request

Returns: Promise<Object>

ApiService.put(url, data, options?)

PUT request (full replace)

ApiService.delete(url, options?)

DELETE request

ApiService.clearCache()

Clear cached responses

// Clear all
ApiService.clearCache();

// Clear specific
ApiService.clearCache('/users');

Request Options

ApiService.get('/api/data', {
  // Query parameters
  params: { q: 'search' },

  // Custom headers
  headers: {
    'X-Custom-Header': 'value'
  },

  // Timeout override
  timeout: 60000,

  // Cache this request
  cache: true,

  // Cache TTL override
  cacheTtl: 600000,

  // Skip interceptors
  skipInterceptors: false
});

Interceptors

// Request interceptor
ApiService.interceptors.request.use((config) => {
  // Add auth header
  config.headers['Authorization'] = `Bearer ${getToken()}`;
  return config;
});

// Response interceptor
ApiService.interceptors.response.use(
  (response) => {
    // Transform response
    return response;
  },
  (error) => {
    // Handle errors
    if (error.status === 401) {
      AuthManager.requireAuth();
    }
    throw error;
  }
);

Error Handling

try {
  const data = await ApiService.get('/api/resource');
} catch (error) {
  // error.status - HTTP status code
  // error.message - Error message
  // error.data - Response body

  if (error.status === 404) {
    console.log('No data available');
  } else if (error.status === 422) {
    console.log('Validation errors:', error.data.errors);
  } else {
    console.log('Error:', error.message);
  }
}

Common Pitfalls

⚠️ 1. Error Handling

// ❌ Not handling errors
const data = await ApiService.get('/api/data');

// ✅ Handle errors
try {
  const data = await ApiService.get('/api/data');
} catch (error) {
  NotificationManager.error(error.message);
}

⚠️ 2. Base URL

// ❌ Hardcode full URL
ApiService.get('https://api.example.com/users');

// ✅ Use relative path
ApiService.get('/users');

Related Documentation

• AuthManager - Authentication
• FormManager - Forms