null

Anuchit Chalothorn

Human Knowledge Belongs to The World

เขียน API Call ให้เร็วขึ้นใน Flutter

01 Mar 2025, 20:31

การเรียก API เป็นหนึ่งในกระบวนการที่ส่งผลต่อประสิทธิภาพของแอป Flutter หากทำได้ไม่ดี อาจทำให้แอปโหลดช้าและประสบการณ์ใช้งานแย่ลง มาดูวิธีปรับปรุงให้เร็วขึ้นกัน!

1. ใช้ Concurrent Requests

แทนที่จะเรียก API ทีละตัว ให้ใช้ Future.wait() เพื่อเรียกหลาย API พร้อมกัน ใช้เมื่อ API ไม่ต้องรอข้อมูลจากกันและกัน

Future<void> fetchData() async {
          final results = await Future.wait([
            http.get(Uri.parse('https://api.example.com/user')),
            http.get(Uri.parse('https://api.example.com/posts')),
          ]);
        
          final userData = jsonDecode(results[0].body);
          final postsData = jsonDecode(results[1].body);
        
          print(userData);
          print(postsData);
        }

2. เปิดใช้ HTTP Keep-Alive

ลดเวลาการเชื่อมต่อใหม่ทุกครั้งด้วย HttpClient แทน http library ปกติ วิธีนี้ช่วยลด Latency ได้ โดยเฉพาะเมื่อมีการเรียก API บ่อย

final client = HttpClient()..idleTimeout = const Duration(seconds: 15);
        
        Future<void> fetchData() async {
          final request = await client.getUrl(Uri.parse('https://api.example.com/data'));
          final response = await request.close();
          final responseBody = await response.transform(utf8.decoder).join();
        
          print(responseBody);
        }

3. ใช้ Compression (Gzip)

บีบอัดข้อมูลตอบกลับ ลดขนาด Payload เซิร์ฟเวอร์ต้องรองรับ Gzip ด้วย

final response = await http.get(
          Uri.parse('https://api.example.com/data'),
          headers: {'Accept-Encoding': 'gzip'},
        );

4. ใช้ Cache ลดจำนวน API Calls

ลดภาระเซิร์ฟเวอร์ เหมาะกับข้อมูลที่ไม่เปลี่ยนแปลงบ่อย

import 'package:shared_preferences/shared_preferences.dart';
        
        Future<String?> getCachedData() async {
          final prefs = await SharedPreferences.getInstance();
          return prefs.getString('cached_response');
        }
        
        Future<void> fetchData() async {
          final cachedData = await getCachedData();
          if (cachedData != null) {
            print('ใช้ Cache: $cachedData');
            return;
          }
        
          final response = await http.get(Uri.parse('https://api.example.com/data'));
          final responseBody = response.body;
        
          final prefs = await SharedPreferences.getInstance();
          prefs.setString('cached_response', responseBody);
        
          print('เรียก API: $responseBody');
        }

5. ใช้ Compute() ลดการบล็อก UI

เหมาะสำหรับ JSON ขนาดใหญ่ ช่วยให้ UI ไม่กระตุก

import 'dart:convert';
        import 'package:flutter/foundation.dart';
        
        Future<void> fetchData() async {
          final response = await http.get(Uri.parse('https://api.example.com/data'));
          final parsedData = await compute(parseJson, response.body);
          print(parsedData);
        }
        
        List<dynamic> parseJson(String body) {
          return jsonDecode(body);
        }

สรุป

ทำตามเทคนิคเหล่านี้ แล้วแอปของคุณจะโหลด API ได้เร็วขึ้น