บทความ

ธนินัช ดอทคอม - ผู้เชี่ยวชาญทำเว็บไซต์

นอกจาก package http แล้ว ยังมี package อีกหนึ่งตัวที่ชื่อว่า dio ที่ใช้สำหรับการเรียกใช้งาน API ใน Flutter ได้อีกด้วย โดย dio มีการจัดการการเชื่อมต่อแบบ asynchronous และมีฟีเจอร์เพิ่มเติมอีกมากมาย เช่น การกำหนด timeout, การกำหนด header และ interceptor สำหรับตรวจสอบ token ก่อนทำการเรียก API เป็นต้น ดังนั้น การใช้งาน dio จึงเป็นทางเลือกที่ดีกว่าในบางกรณี ดังนี้

Import package: ก่อนอื่นเราต้อง import package dio โดยเพิ่มโค้ดด้านล่างนี้ที่ด้านบนของไฟล์ Dart ของเรา

import 'package:dio/dio.dart';

สร้าง instance ของ Dio: เราต้องสร้าง instance ของ Dio ก่อนเพื่อใช้สำหรับการเรียกใช้งาน API ดังนี้

final dio = Dio();

สร้าง function สำหรับเรียกใช้ API: เราสามารถสร้าง function ที่รับ parameter เป็น URL ของ API และเมื่อเรียกใช้ function จะส่ง request ไปยัง API และรับ response กลับมา ดังนี้

void fetchData(String url) async {  
    try {   
      final response = await dio.get(url);    
       // ดึงข้อมูลจาก response.data    
      final data = response.data;    
      // ทำอะไรต่อก็ได้  
    } catch (error) {    
      // แสดง error message    
    throw Exception('Failed to load data');  
   }
}

ใช้ function เพื่อเรียกใช้ API: เมื่อเราสร้าง function เพื่อเรียกใช้ API แล้ว เราสามารถเรียกใช้ function นั้นๆ ด้วย URL ของ API ที่เราต้องการได้ ดังนี้

fetchData('https://jsonplaceholder.typicode.com/todos/1');

โดย URL ที่ใช้ในตัวอย่างนี้เป็นตัวอย่างเท่านั้น สามารถเปลี่ยน URL เป็น URL ของ API ต่างๆ ที่ต้องการเรียกใช้งานได้

การใช้งาน dio ทำให้เราสามารถจัดการการเชื่อมต่อแบบ asynchronous ได้ง่ายขึ้น และมีฟีเจอร์เพิ่มเติมที่ช่วยให้การเรียกใช้งาน API มีประสิทธิภาพมากขึ้น โดยไม่ต้องเขียน code ที่ซับซ้อนเหมือนกับการใช้งาน package http ซึ่งทำให้ dio เป็นทางเลือกที่ดีกว่าในบางกรณี.

ตัวอย่าง 1

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

class ApiExample extends StatefulWidget {
@override
_ApiExampleState createState() => _ApiExampleState();
}

class _ApiExampleState extends State<ApiExample> {
List<dynamic> _posts = [];

@override
void initState() {
super.initState();
_fetchPosts();
}

Future<void> _fetchPosts() async {
try {
final response = await Dio().get('https://jsonplaceholder.typicode.com/posts');
if (response.statusCode == 200) {
setState(() {
_posts = response.data;
});
}
} catch (error) {
print('Error fetching posts: $error');
}
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('API Example'),
),
body: ListView.builder(
itemCount: _posts.length,
itemBuilder: (BuildContext context, int index) {
final post = _posts[index];
return ListTile(
title: Text(post['title']),
subtitle: Text(post['body']),
);
},
),
);
}
}

โค้ดนี้เป็นตัวอย่างการใช้ Flutter ในการเรียกใช้งาน API ด้วย Dio package ซึ่งเป็น library สำหรับ HTTP client ในภาษา Dart ในตัวอย่างนี้ โค้ดจะเรียกใช้งาน API จาก JSONPlaceholder แล้วนำมาแสดงผลใน ListView widget

class ApiExample คือ class ของ Widget ที่สร้างเป็น stateful widget เพื่อให้ widget นี้เปลี่ยนแปลงได้ โดย _ApiExampleState คือ class ของ state ซึ่งกำหนดตัวแปร _posts เป็น List สำหรับเก็บข้อมูลที่ดึงมาจาก API

initState() คือ method ที่เรียกใช้งานในขณะที่ widget กำลังถูกสร้างขึ้น ซึ่งใน method นี้จะเรียกใช้ _fetchPosts() เพื่อดึงข้อมูลโพสต์จาก API

_fetchPosts() เป็น asynchronous method ที่ใช้ Dio package เพื่อเรียกใช้งาน API จาก URL ที่กำหนด โดย method นี้จะตรวจสอบ response ว่าสำเร็จหรือไม่ ถ้าสำเร็จจะเก็บข้อมูลที่ได้ไว้ในตัวแปร _posts และเรียกใช้งาน setState() เพื่อแสดงผลลัพธ์ใหม่บนหน้าจอ

build() เป็น method ที่สร้าง widget tree โดยในตัวอย่างนี้จะสร้าง Scaffold widget ที่ประกอบด้วย AppBar widget และ ListView.builder widget ที่ใช้แสดงผลลัพธ์โพสต์ที่ดึงมาจาก API โดยกำหนดจำนวนรายการและรายการแต่ละรายการให้แสดงผลโดยใช้ itemBuilder() ซึ่งจะสร้าง ListTile widget สำหรับแสดงข้อมูลแต่ละรายการโพสต์

ตัวอย่างที่ 2

ใน Dio package สามารถแปลงข้อมูลจาก JSON string เป็น Object ในภาษา Dart ได้โดยตรงโดยไม่จำเป็นต้องใช้ json.decode() หรือการสร้าง Class ในการแปลง JSON เช่นเดียวกับที่ใช้กับ http package

ตัวอย่างการใช้งานดังนี้

import 'package:dio/dio.dart';

void main() async {
  Dio dio = Dio();
  Response response = await dio.get('https://jsonplaceholder.typicode.com/users/1');

  Map<String, dynamic> userMap = response.data;
  String name = userMap['name'];
  int age = userMap['age'];
  String city = userMap['address']['city'];

  print(name); // Output: Leanne Graham
  print(age); // Output: 18
  print(city); // Output: Gwenborough
}

จากตัวอย่างข้างต้น เมื่อส่ง request ไปยัง URL https://jsonplaceholder.typicode.com/users/1 และได้รับ response กลับมาในรูปแบบของ JSON string ที่มี key-value pairs ในรูปแบบของ Map โดยใช้ Dio package สามารถนำ Map ที่ได้ไปใช้งานได้โดยตรง ไม่จำเป็นต้องแปลงเป็น Object หรือใช้ json.decode() ในการแปลง JSON ก่อนแล้วแปลงให้อยู่ในรูปแบบของ Object อีกทีแล้วสามารถใช้ key ในการเข้าถึง value ได้เช่นเดียวกับการใช้ http package

ตัวอย่างที่ 3

ใน Flutter จะใช้ Map และ Object เพื่อเก็บข้อมูลได้เช่นกัน โดยใน Dio package สามารถแปลง JSON string ให้อยู่ในรูปแบบของ Map หรือ Object ได้ตามต้องการ ตัวอย่างการใช้งาน Map และ Object ด้วย Dio package ใน Flutter ดังนี้

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

class User {
  final String name;
  final int age;
  final String city;

  User({this.name, this.age, this.city});

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      name: json['name'],
      age: json['age'],
      city: json['city'],
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Dio Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Dio Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              RaisedButton(
                child: Text('Fetch User'),
                onPressed: () async {
                  Dio dio = Dio();
                  Response response = await dio.get('https://jsonplaceholder.typicode.com/users/1');

                  Map<String, dynamic> userMap = response.data;
                  String name = userMap['name'];
                  int age = userMap['age'];
                  String city = userMap['address']['city'];

                  print(name); // Output: Leanne Graham
                  print(age); // Output: 18
                  print(city); // Output: Gwenborough

                  User user = User.fromJson(userMap);
                  print(user.name); // Output: Leanne Graham
                  print(user.age); // Output: 18
                  print(user.city); // Output: Gwenborough
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

จากตัวอย่างข้างต้น เมื่อกดปุ่ม "Fetch User" จะทำการส่ง request ไปยัง URL https://jsonplaceholder.typicode.com/users/1 และได้รับ response กลับมาในรูปแบบของ JSON string ที่มี key-value pairs ในรูปแบบของ Map แล้วสามารถนำ Map ที่ได้ไปใช้งานได้โดยตรง หรือใช้ Class User ที่สร้างขึ้นเพื่อแปลง JSON string เป็น Object ก็ได้ การใช้ Map และ Object ขึ้นอยู่กับว่าต้องการใช้งานแบบใดเหมาะสมกับสถานการณ์แต่ละกรณี