Flutter: Xử lí gọi api đồng thời (Parallel API)

Hí anh em, quay trở lại với chuyên mục flutter, hôm nay mình xin giới thiệu về  cách xử lí gọi api đồng thời cùng lúc (song song).

Đại khái thì khi phát triển một mềm, ở một màn, ví dụ như Home, chúng ta có thể sẽ phải gọi một lúc nhiều api để lấy dữ liệu. Trong khi đó, nếu cứ dùng Future async await cho từng api thì thời gian đợi để từng api hoàn thành sẽ khiến người dùng có trải nghiệm không được tốt. Trong phần tìm hiểu sâu này, chúng ta sẽ khám phá cách các lệnh gọi API song song có thể tăng tốc ứng dụng Flutter của bạn và cung cấp cho người dùng trải nghiệm liền mạch.

Các lệnh gọi API song song là gì?

Các lệnh gọi API truyền thống trong Flutter thường tuần tự, nghĩa là yêu cầu này được thực hiện sau yêu cầu kia. Mặc dù phương pháp này hoạt động nhưng nó có thể dẫn đến hiệu suất ứng dụng chậm hơn, đặc biệt là khi xử lý nhiều nguồn dữ liệu hoặc tập dữ liệu lớn. Mặt khác, các lệnh gọi API song song cho phép ứng dụng của bạn tìm nạp dữ liệu từ nhiều điểm cuối cùng một lúc. Nó giống như có nhiều làn đường trên đường cao tốc, với mỗi làn đường thể hiện một yêu cầu API khác nhau. Quá trình xử lý song song này giúp giảm đáng kể thời gian truy xuất dữ liệu, giúp ứng dụng hoạt động nhanh hơn và phản hồi nhanh hơn.

Cách thực hiện

Việc triển khai các lệnh gọi API song song trong ứng dụng Flutter của bạn đòi hỏi sự chỉn chu và cẩn thận.  Từng bước để tích hợp lệnh gọi API song song vào ứng dụng của bạn, bao gồm các chủ đề như:

• Quản lý đồng thời với async/await của Dart
• Sử dụng phương thức Future.wait/Isolate để song song hóa các yêu cầu
• Xử lý lỗi
• Tối ưu hóa chuỗi lệnh gọi API để đạt hiệu quả tối đa

Lưu ý: Isolate rất mạnh mẽ đối với các tác vụ liên quan đến CPU, nhưng việc sử dụng chúng cho nhiều lệnh gọi API có thể gây ra sự phức tạp và chi phí không cần thiết. Đối với các hoạt động không đồng bộ hoặc giới hạn I/O, các cơ chế đồng thời có sẵn của Dart, như Future.wait, thường phù hợp và hiệu quả hơn.

Kịch bản thực tế

Mình vừa phát triển một ứng dụng, tại màn home, mình cần 5 API: lịch sử đặt chỗ, thông tin người dùng, thông tin quảng cáo, danh sách cửa hàng, gói đăng kí. Nếu không có lệnh gọi API song song, trải nghiệm người dùng có thể bị ảnh hưởng do thời gian tải kéo dài. Tưởng tưởng hôm ấy mạng của bạn lag, mỗi api mất 10s, thì bạn phải đợi gần 1p để tải được màn home. Thật sự tệ @@.

# Gọi API tuần tự:

Future<void> fetchSequentialData() async {
  // Record the start time to measure execution time.
  final startTime = DateTime.now();

  // Perform sequential API calls.
  final response1 = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));
  final response2 = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/2'));
  final response3 = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/3'));

  // Record the end time and calculate the elapsed time.
  final endTime = DateTime.now();
  final elapsedTime = endTime.difference(startTime);

  // Print the execution time for reference.
  print('Time taken for sequential calls: ${elapsedTime.inMilliseconds} ms');

  // Update the UI with the sequential execution time (assuming setState is available in a Flutter context).
  setState(() {
    _sequentialExecutionTime = "${elapsedTime.inMilliseconds} ms";
  });

  // Process and print the titles from each response.
  print('Title: ${json.decode(response1.body)['title']}');
  print('Title: ${json.decode(response2.body)['title']}');
  print('Title: ${json.decode(response3.body)['title']}');
}

# Gọi API song song:

Future<void> fetchParallelData() async {
  // Record the start time to measure execution time.
  final startTime = DateTime.now();

  // Initiate parallel API calls using Future.wait.
  final responses = await Future.wait([
    http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1')),
    http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/2')),
    http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/3')),
  ]);

  // Record the end time and calculate the elapsed time.
  final endTime = DateTime.now();
  final elapsedTime = endTime.difference(startTime);

  // Print the execution time for reference.
  print('Time taken for parallel calls: ${elapsedTime.inMilliseconds} ms');

  // Update the UI with the parallel execution time (assuming setState is available in a Flutter context).
  setState(() {
    _parallelExecutionTime = "${elapsedTime.inMilliseconds} ms";
  });

  // Process the responses.
  for (final response in responses) {
    // Decode the JSON data from each response.
    final data = json.decode(response.body);

    // Print the title of each post.
    print('Title: ${data['title']}');
  }
}

Demo

Kết luận

Trong bài viết này, mình đã giới thiệu sự mạnh mẽ của lệnh gọi API song song trong quá trình phát triển ứng dụng Flutter. Chúng ta đã thấy việc thực thi đồng thời nhiều yêu cầu API có thể tăng đáng kể hiệu suất và khả năng phản hồi của ứng dụng, mang lại trải nghiệm người dùng mượt mà hơn. Bằng cách so sánh các lệnh gọi API song song và tuần tự, ta đã nêu bật những ưu điểm của tính năng đồng thời, giảm thời gian tải và cải thiện tương tác của người dùng.  Việc hiểu và triển khai các lệnh gọi API song song có thể là yếu tố giúp ứng dụng Flutter của bạn tạo lên khác biệt.