One post tagged with "Interceptor" | Hướng Nghiệp Dữ Liệu

Hướng Dẫn Call API Bằng Dio Có Kèm Interceptor và Retry Logic

January 15, 2025 · 9 min read

FullStack

Trong bài viết này, chúng ta sẽ học cách sử dụng Dio để gọi API trong Flutter với các tính năng nâng cao như interceptors và retry logic. Đây là những kỹ thuật quan trọng để xây dựng ứng dụng Flutter chuyên nghiệp.

1️⃣ Cài Đặt và Cấu Hình Cơ Bản

1.1 Cài Đặt Dio

Thêm vào pubspec.yaml:

dependencies:
  dio: ^5.4.0
  dio_retry: ^2.0.0  # Cho retry logic

1.2 Tạo Dio Instance

import 'package:dio/dio.dart';

class ApiClient {
  late Dio _dio;

  ApiClient() {
    _dio = Dio(BaseOptions(
      baseUrl: 'https://api.example.com',
      connectTimeout: Duration(seconds: 5),
      receiveTimeout: Duration(seconds: 3),
      sendTimeout: Duration(seconds: 3),
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
      },
    ));
  }

  Dio get dio => _dio;
}

2️⃣ Interceptors - Xử Lý Requests và Responses

2.1 Log Interceptor

Ghi log tất cả requests và responses:

import 'package:dio/dio.dart';

void setupLogInterceptor(Dio dio) {
  dio.interceptors.add(LogInterceptor(
    request: true,
    requestHeader: true,
    requestBody: true,
    responseHeader: true,
    responseBody: true,
    error: true,
    logPrint: (obj) {
      // Sử dụng logger của bạn (ví dụ: logger package)
      print(obj);
    },
  ));
}

2.2 Authentication Interceptor

Tự động thêm token vào mọi request:

class AuthInterceptor extends Interceptor {
  @override
  void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
    // Lấy token từ storage
    final token = TokenStorage.getToken();
    
    if (token != null) {
      options.headers['Authorization'] = 'Bearer $token';
    }
    
    handler.next(options);
  }
}

// Sử dụng
dio.interceptors.add(AuthInterceptor());

2.3 Refresh Token Interceptor

Tự động refresh token khi hết hạn:

class RefreshTokenInterceptor extends Interceptor {
  final Dio refreshDio;

  RefreshTokenInterceptor(this.refreshDio);

  @override
  void onError(DioException err, ErrorInterceptorHandler handler) async {
    // Nếu lỗi 401 (Unauthorized)
    if (err.response?.statusCode == 401) {
      try {
        // Refresh token
        final newToken = await _refreshToken();
        
        if (newToken != null) {
          // Lưu token mới
          TokenStorage.saveToken(newToken);
          
          // Retry request với token mới
          final opts = err.requestOptions;
          opts.headers['Authorization'] = 'Bearer $newToken';
          
          final response = await refreshDio.request(
            opts.path,
            options: Options(
              method: opts.method,
              headers: opts.headers,
            ),
            data: opts.data,
            queryParameters: opts.queryParameters,
          );
          
          return handler.resolve(response);
        }
      } catch (e) {
        // Nếu refresh token thất bại, đăng xuất
        await AuthService.logout();
        return handler.reject(err);
      }
    }
    
    return handler.next(err);
  }

  Future<String?> _refreshToken() async {
    try {
      final refreshToken = TokenStorage.getRefreshToken();
      final response = await refreshDio.post(
        '/auth/refresh',
        data: {'refresh_token': refreshToken},
      );
      
      return response.data['access_token'];
    } catch (e) {
      return null;
    }
  }
}

// Sử dụng
final refreshDio = Dio();
dio.interceptors.add(RefreshTokenInterceptor(refreshDio));

2.4 Error Handling Interceptor

Xử lý lỗi tập trung:

class ErrorInterceptor extends Interceptor {
  @override
  void onError(DioException err, ErrorInterceptorHandler handler) {
    String errorMessage = 'Đã xảy ra lỗi';

    switch (err.type) {
      case DioExceptionType.connectionTimeout:
      case DioExceptionType.sendTimeout:
      case DioExceptionType.receiveTimeout:
        errorMessage = 'Kết nối timeout. Vui lòng thử lại.';
        break;
      case DioExceptionType.badResponse:
        final statusCode = err.response?.statusCode;
        switch (statusCode) {
          case 400:
            errorMessage = 'Yêu cầu không hợp lệ';
            break;
          case 401:
            errorMessage = 'Chưa đăng nhập hoặc token đã hết hạn';
            break;
          case 403:
            errorMessage = 'Không có quyền truy cập';
            break;
          case 404:
            errorMessage = 'Không tìm thấy tài nguyên';
            break;
          case 500:
            errorMessage = 'Lỗi server. Vui lòng thử lại sau.';
            break;
          default:
            errorMessage = 'Lỗi server: $statusCode';
        }
        break;
      case DioExceptionType.cancel:
        errorMessage = 'Request đã bị hủy';
        break;
      case DioExceptionType.unknown:
        errorMessage = 'Không có kết nối internet';
        break;
      default:
        errorMessage = err.message ?? 'Đã xảy ra lỗi';
    }

    // Hiển thị thông báo lỗi (sử dụng snackbar, dialog, etc.)
    ErrorHandler.showError(errorMessage);

    handler.next(err);
  }
}

// Sử dụng
dio.interceptors.add(ErrorInterceptor());

2.5 Request/Response Transformer Interceptor

Transform dữ liệu trước khi gửi/nhận:

class DataTransformerInterceptor extends Interceptor {
  @override
  void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
    // Transform request data
    if (options.data is Map) {
      // Thêm timestamp, device info, etc.
      options.data = {
        ...options.data as Map,
        'timestamp': DateTime.now().toIso8601String(),
        'device_id': DeviceInfo.getDeviceId(),
      };
    }
    
    handler.next(options);
  }

  @override
  void onResponse(Response response, ResponseInterceptorHandler handler) {
    // Transform response data
    if (response.data is Map) {
      final data = response.data as Map;
      
      // Unwrap nested data nếu cần
      if (data.containsKey('data')) {
        response.data = data['data'];
      }
    }
    
    handler.next(response);
  }
}

// Sử dụng
dio.interceptors.add(DataTransformerInterceptor());

3️⃣ Retry Logic - Tự Động Thử Lại Khi Thất Bại

3.1 Sử dụng dio_retry Package

import 'package:dio/dio.dart';
import 'package:dio_retry/dio_retry.dart';

void setupRetryInterceptor(Dio dio) {
  dio.interceptors.add(
    RetryInterceptor(
      dio: dio,
      options: RetryOptions(
        retries: 3, // Số lần retry
        retryInterval: Duration(seconds: 2), // Khoảng thời gian giữa các lần retry
        exponentialBackoff: true, // Tăng dần thời gian chờ
        retryableExtraStatuses: [401, 403], // Retry với các status code này
      ),
    ),
  );
}

3.2 Custom Retry Logic

Tự xây dựng retry logic:

class RetryInterceptor extends Interceptor {
  final int maxRetries;
  final Duration retryDelay;

  RetryInterceptor({
    this.maxRetries = 3,
    this.retryDelay = const Duration(seconds: 2),
  });

  @override
  void onError(DioException err, ErrorInterceptorHandler handler) async {
    if (_shouldRetry(err)) {
      final retryCount = err.requestOptions.extra['retryCount'] ?? 0;
      
      if (retryCount < maxRetries) {
        // Tăng retry count
        err.requestOptions.extra['retryCount'] = retryCount + 1;
        
        // Đợi trước khi retry
        await Future.delayed(retryDelay * (retryCount + 1));
        
        try {
          // Retry request
          final response = await dio.request(
            err.requestOptions.path,
            options: Options(
              method: err.requestOptions.method,
              headers: err.requestOptions.headers,
            ),
            data: err.requestOptions.data,
            queryParameters: err.requestOptions.queryParameters,
            extra: err.requestOptions.extra,
          );
          
          return handler.resolve(response);
        } catch (e) {
          // Nếu vẫn lỗi, tiếp tục retry hoặc reject
          if (retryCount + 1 < maxRetries) {
            return onError(err, handler);
          }
        }
      }
    }
    
    handler.next(err);
  }

  bool _shouldRetry(DioException err) {
    // Chỉ retry với một số loại lỗi nhất định
    return err.type == DioExceptionType.connectionTimeout ||
           err.type == DioExceptionType.receiveTimeout ||
           err.type == DioExceptionType.sendTimeout ||
           (err.response?.statusCode != null && 
            err.response!.statusCode! >= 500);
  }
}

// Sử dụng
dio.interceptors.add(RetryInterceptor(maxRetries: 3));

4️⃣ Ví Dụ Hoàn Chỉnh: API Service Với Interceptors và Retry

import 'package:dio/dio.dart';
import 'package:dio_retry/dio_retry.dart';

class ApiService {
  late Dio _dio;
  static final ApiService _instance = ApiService._internal();

  factory ApiService() => _instance;

  ApiService._internal() {
    _dio = Dio(BaseOptions(
      baseUrl: 'https://api.example.com',
      connectTimeout: Duration(seconds: 5),
      receiveTimeout: Duration(seconds: 3),
      sendTimeout: Duration(seconds: 3),
      headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
      },
    ));

    _setupInterceptors();
  }

  void _setupInterceptors() {
    // 1. Log Interceptor
    _dio.interceptors.add(LogInterceptor(
      requestBody: true,
      responseBody: true,
      error: true,
    ));

    // 2. Auth Interceptor
    _dio.interceptors.add(InterceptorsWrapper(
      onRequest: (options, handler) {
        final token = _getToken();
        if (token != null) {
          options.headers['Authorization'] = 'Bearer $token';
        }
        return handler.next(options);
      },
    ));

    // 3. Retry Interceptor
    _dio.interceptors.add(
      RetryInterceptor(
        dio: _dio,
        options: RetryOptions(
          retries: 3,
          retryInterval: Duration(seconds: 2),
          exponentialBackoff: true,
        ),
      ),
    );

    // 4. Error Interceptor
    _dio.interceptors.add(InterceptorsWrapper(
      onError: (error, handler) {
        _handleError(error);
        return handler.next(error);
      },
    ));
  }

  String? _getToken() {
    // Lấy token từ secure storage
    // return SecureStorage.getToken();
    return null;
  }

  void _handleError(DioException error) {
    // Xử lý lỗi tập trung
    // Có thể hiển thị snackbar, log, etc.
    print('API Error: ${error.message}');
  }

  // GET request
  Future<Response<T>> get<T>(
    String path, {
    Map<String, dynamic>? queryParameters,
    Options? options,
    CancelToken? cancelToken,
  }) async {
    try {
      return await _dio.get<T>(
        path,
        queryParameters: queryParameters,
        options: options,
        cancelToken: cancelToken,
      );
    } on DioException catch (e) {
      throw _mapException(e);
    }
  }

  // POST request
  Future<Response<T>> post<T>(
    String path, {
    dynamic data,
    Map<String, dynamic>? queryParameters,
    Options? options,
    CancelToken? cancelToken,
  }) async {
    try {
      return await _dio.post<T>(
        path,
        data: data,
        queryParameters: queryParameters,
        options: options,
        cancelToken: cancelToken,
      );
    } on DioException catch (e) {
      throw _mapException(e);
    }
  }

  // PUT request
  Future<Response<T>> put<T>(
    String path, {
    dynamic data,
    Map<String, dynamic>? queryParameters,
    Options? options,
    CancelToken? cancelToken,
  }) async {
    try {
      return await _dio.put<T>(
        path,
        data: data,
        queryParameters: queryParameters,
        options: options,
        cancelToken: cancelToken,
      );
    } on DioException catch (e) {
      throw _mapException(e);
    }
  }

  // DELETE request
  Future<Response<T>> delete<T>(
    String path, {
    dynamic data,
    Map<String, dynamic>? queryParameters,
    Options? options,
    CancelToken? cancelToken,
  }) async {
    try {
      return await _dio.delete<T>(
        path,
        data: data,
        queryParameters: queryParameters,
        options: options,
        cancelToken: cancelToken,
      );
    } on DioException catch (e) {
      throw _mapException(e);
    }
  }

  Exception _mapException(DioException error) {
    switch (error.type) {
      case DioExceptionType.connectionTimeout:
      case DioExceptionType.sendTimeout:
      case DioExceptionType.receiveTimeout:
        return TimeoutException('Request timeout');
      case DioExceptionType.badResponse:
        return ServerException(
          'Server error: ${error.response?.statusCode}',
          error.response?.statusCode,
        );
      case DioExceptionType.cancel:
        return CancelException('Request cancelled');
      default:
        return NetworkException('Network error: ${error.message}');
    }
  }
}

// Custom exceptions
class TimeoutException implements Exception {
  final String message;
  TimeoutException(this.message);
}

class ServerException implements Exception {
  final String message;
  final int? statusCode;
  ServerException(this.message, this.statusCode);
}

class CancelException implements Exception {
  final String message;
  CancelException(this.message);
}

class NetworkException implements Exception {
  final String message;
  NetworkException(this.message);
}

5️⃣ Sử Dụng API Service

// Trong repository hoặc service
class UserRepository {
  final ApiService _apiService = ApiService();

  Future<User> getUser(int id) async {
    try {
      final response = await _apiService.get<Map<String, dynamic>>('/users/$id');
      return User.fromJson(response.data!);
    } catch (e) {
      throw Exception('Failed to get user: $e');
    }
  }

  Future<List<User>> getUsers() async {
    try {
      final response = await _apiService.get<List<dynamic>>('/users');
      return (response.data as List)
          .map((json) => User.fromJson(json))
          .toList();
    } catch (e) {
      throw Exception('Failed to get users: $e');
    }
  }

  Future<User> createUser(User user) async {
    try {
      final response = await _apiService.post<Map<String, dynamic>>(
        '/users',
        data: user.toJson(),
      );
      return User.fromJson(response.data!);
    } catch (e) {
      throw Exception('Failed to create user: $e');
    }
  }
}

6️⃣ Best Practices

6.1 Thứ Tự Interceptors

Thứ tự interceptors quan trọng:

// 1. Log interceptor (đầu tiên để log tất cả)
dio.interceptors.add(LogInterceptor());

// 2. Auth interceptor (thêm token)
dio.interceptors.add(AuthInterceptor());

// 3. Retry interceptor (retry khi lỗi)
dio.interceptors.add(RetryInterceptor());

// 4. Error interceptor (xử lý lỗi cuối cùng)
dio.interceptors.add(ErrorInterceptor());

6.2 Sử Dụng Singleton Pattern

Tạo một instance Dio duy nhất cho toàn bộ app:

class ApiService {
  static final ApiService _instance = ApiService._internal();
  factory ApiService() => _instance;
  ApiService._internal();
}

6.3 Cancel Token Cho Long-Running Requests

final cancelToken = CancelToken();

// Gọi API
_apiService.get('/data', cancelToken: cancelToken);

// Hủy khi không cần thiết (ví dụ: khi widget dispose)
@override
void dispose() {
  cancelToken.cancel('Widget disposed');
  super.dispose();
}

7️⃣ Kết Luận

Với Dio, interceptors và retry logic, bạn có thể:

✅ Tự động thêm authentication vào mọi request
✅ Xử lý lỗi tập trung và nhất quán
✅ Tự động retry khi request thất bại
✅ Log requests/responses để debug
✅ Transform data trước khi gửi/nhận

💡 Lời khuyên: Sử dụng interceptors để tách biệt concerns. Mỗi interceptor nên có một nhiệm vụ cụ thể. Điều này giúp code dễ đọc, dễ test và dễ bảo trì.

🎓 Học Sâu Hơn Về Flutter

Muốn master Flutter, API Integration, và các best practices? Tham gia các khóa học tại Hướng Nghiệp Dữ Liệu:

📚 Khóa Học Liên Quan:

✅ Lập Trình Ứng Dụng Di Động Flutter - Xây dựng ứng dụng Flutter từ cơ bản đến nâng cao

📝 Bài viết này được biên soạn bởi đội ngũ Hướng Nghiệp Dữ Liệu. Để cập nhật thêm về Flutter, Dio và các best practices trong phát triển ứng dụng di động, hãy theo dõi blog của chúng tôi.

1️⃣ Cài Đặt và Cấu Hình Cơ Bản​

1.1 Cài Đặt Dio​

1.2 Tạo Dio Instance​

2️⃣ Interceptors - Xử Lý Requests và Responses​

2.1 Log Interceptor​

2.2 Authentication Interceptor​

2.3 Refresh Token Interceptor​

2.4 Error Handling Interceptor​

2.5 Request/Response Transformer Interceptor​

3️⃣ Retry Logic - Tự Động Thử Lại Khi Thất Bại​

3.1 Sử dụng dio_retry Package​

3.2 Custom Retry Logic​

4️⃣ Ví Dụ Hoàn Chỉnh: API Service Với Interceptors và Retry​

5️⃣ Sử Dụng API Service​

6️⃣ Best Practices​

6.1 Thứ Tự Interceptors​

6.2 Sử Dụng Singleton Pattern​

6.3 Cancel Token Cho Long-Running Requests​

7️⃣ Kết Luận​

🎓 Học Sâu Hơn Về Flutter​

📚 Khóa Học Liên Quan:​