🌐 Mô Hình & Giao Tiếp Frontend ↔ Backend

📤 REQUEST:
GET /users?page=2&limit=5 HTTP/1.1
Host: api.example.com
Accept: application/json
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64)
Cache-Control: no-cache

[Dòng trống - không có body cho GET]

📤 REQUEST (POST):
POST /posts HTTP/1.1
Host: api.example.com
Content-Type: application/json
Content-Length: 67
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

{
  "title": "Bài học HTTP",
  "body": "Học cách giao tiếp Frontend-Backend",
  "userId": 17
}

📥 RESPONSE:
HTTP/1.1 201 Created
Content-Type: application/json
Location: /posts/101
Set-Cookie: sessionId=abc123; Path=/; HttpOnly
X-RateLimit-Remaining: 99

{
  "id": 101,
  "title": "Bài học HTTP",
  "body": "Học cách giao tiếp Frontend-Backend",
  "userId": 17,
  "createdAt": "2025-08-09T10:30:00Z"
}

// XMLHttpRequest GET
function xhrGetUser(userId, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('GET', `https://jsonplaceholder.typicode.com/users/${userId}`, true);
  xhr.setRequestHeader('Accept', 'application/json');
  
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status >= 200 && xhr.status < 300) {
        try {
          const data = JSON.parse(xhr.responseText);
          callback(null, data);
        } catch (e) {
          callback(new Error('Invalid JSON: ' + e.message));
        }
      } else {
        callback(new Error(`HTTP ${xhr.status}: ${xhr.statusText}`));
      }
    }
  };
  
  xhr.onerror = () => callback(new Error('Network error'));
  xhr.ontimeout = () => callback(new Error('Request timeout'));
  xhr.timeout = 10000;
  xhr.send();
}

// Sử dụng
xhrGetUser(1, (error, user) => {
  if (error) console.error('Error:', error.message);
  else console.log('User:', user);
});

// XMLHttpRequest POST
function xhrCreatePost(postData, callback) {
  const xhr = new XMLHttpRequest();
  xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.setRequestHeader('Accept', 'application/json');
  
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status >= 200 && xhr.status < 300) {
        try {
          const data = JSON.parse(xhr.responseText);
          callback(null, data);
        } catch (e) {
          callback(new Error('Invalid JSON: ' + e.message));
        }
      } else {
        callback(new Error(`HTTP ${xhr.status}: ${xhr.statusText}`));
      }
    }
  };
  
  xhr.onerror = () => callback(new Error('Network error'));
  xhr.send(JSON.stringify(postData));
}

// Sử dụng
xhrCreatePost({
  title: 'XMLHttpRequest Post',
  body: 'Learning XHR in Bài 17',
  userId: 1
}, (error, result) => {
  if (error) console.error('Error:', error.message);
  else console.log('Created post:', result);
});

// Fetch GET
async function fetchGetUsers() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }
    
    const users = await response.json();
    console.log('Users:', users);
    return users;
  } catch (error) {
    console.error('Error:', error.message);
    throw error;
  }
}

// Với query parameters
async function fetchSearchUsers(query) {
  const url = new URL('https://jsonplaceholder.typicode.com/users');
  url.searchParams.set('search', query);
  url.searchParams.set('limit', '10');
  
  const response = await fetch(url);
  if (!response.ok) throw new Error('HTTP ' + response.status);
  return await response.json();
}

// Fetch POST
async function fetchCreatePost(postData) {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json'
      },
      body: JSON.stringify(postData)
    });

    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }

    const result = await response.json();
    console.log('Created post:', result);
    return result;
  } catch (error) {
    console.error('Error:', error.message);
    throw error;
  }
}

// Fetch với timeout
async function fetchWithTimeout(url, options = {}, timeoutMs = 5000) {
  const controller = new AbortController();
  const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
  
  try {
    const response = await fetch(url, {
      ...options,
      signal: controller.signal
    });
    clearTimeout(timeoutId);
    return response;
  } catch (error) {
    clearTimeout(timeoutId);
    if (error.name === 'AbortError') {
      throw new Error('Request timeout');
    }
    throw error;
  }
}

// 1. CÀI ĐẶT AXIOS
// Qua CDN (dễ nhất cho học tập)
// <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

// Qua npm (cho dự án thực tế)
// npm install axios

// Import trong module
// import axios from 'axios';

// 2. SỬ DỤNG CƠ BẢN (không khuyến khích cho dự án lớn)
async function basicAxiosExample() {
  try {
    // GET request đơn giản
    const response = await axios.get('https://jsonplaceholder.typicode.com/users/1');
    console.log('User data:', response.data); // JSON đã được parse tự động
    console.log('Status:', response.status);  // 200
    console.log('Headers:', response.headers);
    
    // POST request đơn giản
    const newUser = {
      name: 'John Doe',
      email: 'john@example.com'
    };
    const postResponse = await axios.post('https://jsonplaceholder.typicode.com/users', newUser);
    console.log('Created:', postResponse.data);
    
  } catch (error) {
    // Axios tự động reject 4xx/5xx status codes
    if (error.response) {
      console.error('HTTP Error:', error.response.status);
      console.error('Error data:', error.response.data);
    } else if (error.request) {
      console.error('Network error - no response received');
    } else {
      console.error('Request setup error:', error.message);
    }
  }
}

// 3. TẠO AXIOS INSTANCE (KHUYẾN KHÍCH)
const apiClient = axios.create({
  // Base URL - sẽ được thêm vào trước mọi relative URLs
  baseURL: 'https://jsonplaceholder.typicode.com',
  
  // Timeout - tự động cancel request sau 10 giây
  timeout: 10000,
  
  // Headers mặc định cho mọi request
  headers: {
    'Content-Type': 'application/json',
    'Accept': 'application/json',
    'User-Agent': 'MyApp/1.0.0',
    // 'Authorization': 'Bearer your-token-here' // Thêm nếu cần auth
  },
  
  // Response type mong muốn
  responseType: 'json', // 'json' | 'text' | 'blob' | 'arraybuffer' | 'stream'
  
  // Gửi cookies cho cross-origin requests
  withCredentials: false, // true nếu cần cookies
  
  // HTTP Basic Authentication
  // auth: {
  //   username: 'your-username',
  //   password: 'your-password'
  // },
  
  // Validate status codes (mặc định: 200-299 là OK)
  validateStatus: function (status) {
    return status >= 200 && status < 300; // hoặc status < 400 để accept 3xx
  },
  
  // Transform request data trước khi gửi
  transformRequest: [function (data, headers) {
    // Có thể modify data ở đây
    console.log('Transforming request data:', data);
    return data;
  }],
  
  // Transform response data sau khi nhận
  transformResponse: [function (data) {
    // Có thể modify response ở đây
    console.log('Transforming response data:', data);
    return data;
  }],
  
  // Số lần redirect tối đa
  maxRedirects: 5,
  
  // Retry config (nếu dùng axios-retry plugin)
  // retry: 3,
  // retryDelay: 1000
});

// 4. SỬ DỤNG INSTANCE
async function useInstanceExample() {
  try {
    // GET với instance - baseURL tự động thêm vào
    const users = await apiClient.get('/users'); // → GET https://jsonplaceholder.typicode.com/users
    console.log('Users from instance:', users.data);
    
    // GET với query parameters
    const filteredUsers = await apiClient.get('/users', {
      params: {
        _limit: 5,
        _sort: 'name'
      }
    });
    
    // POST với instance
    const newPost = await apiClient.post('/posts', {
      title: 'My New Post',
      body: 'This is the post content',
      userId: 1
    });
    
    // PUT update
    const updatedPost = await apiClient.put('/posts/1', {
      id: 1,
      title: 'Updated Title',
      body: 'Updated content',
      userId: 1
    });
    
    // PATCH partial update
    const patchedPost = await apiClient.patch('/posts/1', {
      title: 'Patched Title'
    });
    
    // DELETE
    await apiClient.delete('/posts/1');
    console.log('Post deleted successfully');
    
  } catch (error) {
    console.error('Instance request failed:', error);
  }
}

// REQUEST INTERCEPTOR - chạy trước mỗi request
apiClient.interceptors.request.use(
  function (config) {
    console.log(`🚀 Request: ${config.method?.toUpperCase()} ${config.url}`);
    
    // Thêm timestamp để track performance
    config.metadata = { startTime: new Date() };
    
    // Auto thêm auth token từ localStorage
    const token = localStorage.getItem('authToken');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    
    // Thêm request ID cho tracking
    config.headers['X-Request-ID'] = Math.random().toString(36).substr(2, 9);
    
    // Log request details trong development
    if (process.env.NODE_ENV === 'development') {
      console.log('Request config:', config);
    }
    
    return config; // PHẢI return config
  },
  function (error) {
    console.error('❌ Request interceptor error:', error);
    return Promise.reject(error);
  }
);

// RESPONSE INTERCEPTOR - chạy sau mỗi response
apiClient.interceptors.response.use(
  function (response) {
    // Tính response time
    const endTime = new Date();
    const duration = endTime - response.config.metadata.startTime;
    console.log(`✅ Response: ${response.status} (${duration}ms)`);
    
    // Log response trong development
    if (process.env.NODE_ENV === 'development') {
      console.log('Response data:', response.data);
    }
    
    // Có thể transform response data ở đây
    if (response.data && response.data.data) {
      // Unwrap nested data structure
      response.data = response.data.data;
    }
    
    return response; // PHẢI return response
  },
  function (error) {
    // Centralized error handling
    if (error.response) {
      const { status, data } = error.response;
      
      // Handle specific status codes
      switch (status) {
        case 401:
          console.error('🔒 Unauthorized - redirecting to login');
          localStorage.removeItem('authToken');
          window.location.href = '/login';
          break;
          
        case 403:
          console.error('🚫 Forbidden - insufficient permissions');
          alert('Bạn không có quyền thực hiện hành động này');
          break;
          
        case 404:
          console.error('🔍 Not Found');
          break;
          
        case 422:
          console.error('📝 Validation Error:', data.errors);
          break;
          
        case 429:
          console.error('⏰ Rate Limited - too many requests');
          alert('Quá nhiều requests, vui lòng chờ một chút');
          break;
          
        case 500:
          console.error('💥 Server Error');
          alert('Lỗi server, vui lòng thử lại sau');
          break;
          
        default:
          console.error(`❌ HTTP ${status}:`, data);
      }
    } else if (error.request) {
      console.error('🌐 Network Error - no response received');
      alert('Lỗi kết nối mạng');
    } else {
      console.error('⚙️ Request Setup Error:', error.message);
    }
    
    return Promise.reject(error);
  }
);

// MULTIPLE INSTANCES cho different APIs
const authAPI = axios.create({
  baseURL: 'https://auth-service.com/api',
  timeout: 5000
});

const userAPI = axios.create({
  baseURL: 'https://user-service.com/api',
  timeout: 8000
});

const fileAPI = axios.create({
  baseURL: 'https://file-service.com/api',
  timeout: 30000, // File upload cần timeout lâu hơn
  headers: {
    'Content-Type': 'multipart/form-data'
  }
});

// API SERVICE CLASS pattern
class UserService {
  constructor() {
    this.api = axios.create({
      baseURL: process.env.API_BASE_URL || 'https://api.example.com/v1',
      timeout: 10000,
      headers: {
        'Content-Type': 'application/json'
      }
    });
    
    this.setupInterceptors();
  }
  
  setupInterceptors() {
    // Request interceptor để thêm auth
    this.api.interceptors.request.use(config => {
      const token = this.getAuthToken();
      if (token) {
        config.headers.Authorization = `Bearer ${token}`;
      }
      return config;
    });
    
    // Response interceptor để handle auth errors
    this.api.interceptors.response.use(
      response => response,
      error => {
        if (error.response?.status === 401) {
          this.handleAuthError();
        }
        return Promise.reject(error);
      }
    );
  }
  
  // GET users với pagination và search
  async getUsers(page = 1, limit = 10, search = '') {
    try {
      const response = await this.api.get('/users', {
        params: { page, limit, search }
      });
      
      return {
        users: response.data.data,
        pagination: response.data.pagination
      };
    } catch (error) {
      throw new Error(`Failed to fetch users: ${error.message}`);
    }
  }
  
  // POST create user với validation
  async createUser(userData) {
    try {
      const response = await this.api.post('/users', userData);
      return response.data;
    } catch (error) {
      if (error.response?.status === 422) {
        throw new Error(`Validation failed: ${error.response.data.message}`);
      }
      throw new Error(`Failed to create user: ${error.message}`);
    }
  }
  
  // File upload với progress tracking
  async uploadAvatar(userId, file, onProgress) {
    try {
      const formData = new FormData();
      formData.append('avatar', file);
      
      const response = await this.api.post(`/users/${userId}/avatar`, formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: (progressEvent) => {
          const percentCompleted = Math.round(
            (progressEvent.loaded * 100) / progressEvent.total
          );
          onProgress?.(percentCompleted);
        }
      });
      
      return response.data;
    } catch (error) {
      throw new Error(`Upload failed: ${error.message}`);
    }
  }
  
  // Request với retry logic
  async getUserWithRetry(userId, maxRetries = 3) {
    for (let attempt = 1; attempt <= maxRetries; attempt++) {
      try {
        const response = await this.api.get(`/users/${userId}`);
        return response.data;
      } catch (error) {
        if (attempt === maxRetries) {
          throw error;
        }
        
        // Wait before retry (exponential backoff)
        const delay = Math.pow(2, attempt) * 1000;
        await new Promise(resolve => setTimeout(resolve, delay));
        console.log(`Retry attempt ${attempt + 1} for user ${userId}`);
      }
    }
  }
  
  getAuthToken() {
    return localStorage.getItem('authToken');
  }
  
  handleAuthError() {
    localStorage.removeItem('authToken');
    window.location.href = '/login';
  }
}

// ENVIRONMENT-SPECIFIC CONFIG
const createAPIClient = (environment) => {
  const configs = {
    development: {
      baseURL: 'http://localhost:3000/api',
      timeout: 30000, // Development có thể chậm hơn
      headers: {
        'X-Environment': 'development'
      }
    },
    staging: {
      baseURL: 'https://staging-api.example.com/v1',
      timeout: 15000,
      headers: {
        'X-Environment': 'staging'
      }
    },
    production: {
      baseURL: 'https://api.example.com/v1',
      timeout: 10000,
      headers: {
        'X-Environment': 'production'
      }
    }
  };
  
  return axios.create(configs[environment] || configs.production);
};

// Sử dụng
const userService = new UserService();
const apiClient = createAPIClient(process.env.NODE_ENV);