บทความ
Dio package การกำหนด options BaseOptions, queryParameters ในการส่ง request แบบ GET
การกำหนด options BaseOptions, queryParameters ในการส่ง request แบบ GET ใน Dio package สามารถทำได้ดังนี้
ตัวอย่างที่ 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 dio = Dio(BaseOptions(
baseUrl: 'https://jsonplaceholder.typicode.com',
connectTimeout: 5000, // 5 seconds
receiveTimeout: 5000, // 5 seconds
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
));
final response = await dio.get('/posts', queryParameters: {
'userId': 1,
}, options: Options(
headers: {
'Authorization': 'Bearer token',
},
));
if (response.statusCode == 200) {
setState(() {
_posts = response.data;
});
} else {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Error fetching posts')),
);
} } catch (error) {
//print('Error fetching posts: $error');
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('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']),
);
},
),
);
}
}
ในตัวอย่างโค้ดข้างต้น ฟังก์ชัน _fetchPosts
จะกำหนด options ด้วย BaseOptions
ซึ่งระบุค่าเช่น baseUrl
, connectTimeout
, receiveTimeout
, และ headers
สำหรับการเชื่อมต่อ API ดังนี้
final dio = Dio(BaseOptions(
baseUrl: 'https://jsonplaceholder.typicode.com',
connectTimeout: 5000, // 5 seconds
receiveTimeout: 5000, // 5 seconds
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
},
));
ฟังก์ชัน _fetchPosts
ยังใช้ queryParameters
เพื่อระบุค่า userId
สำหรับการเรียก API เพิ่มเติม ดังนี้
final response = await dio.get('/posts', queryParameters: {
'userId': 1,
}, options: Options(
headers: {
'Authorization': 'Bearer token',
},
));
สุดท้าย ฟังก์ชัน build
จะใช้ ListView.builder เพื่อแสดงผลข้อมูลที่ได้จาก API ตามปกติ
หนังสือพัฒนาตัวเอง
จุดเริ่มต้นที่ชัดเจน