Hướng Dẫn Call API Bằng Dio Có Kèm Interceptor và Retry Logic
· 9 min read
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.