Update Article: 143

Category ID

Content Name

Clear URLs

URL Off page

Content Desc

การกำหนด options BaseOptions, queryParameters ในการส่ง request แบบ GET&nbsp; &nbsp;ใน Dio package สามารถทำได้ดังนี้
ตัวอย่างที่ 1 :
<code>import 'package:flutter/material.dart';</code> <code>import 'package:dio/dio.dart';</code>
<code>class ApiExample extends StatefulWidget {</code> <code>&nbsp; @override</code> <code>&nbsp; _ApiExampleState createState() =&gt; _ApiExampleState();</code> <code>}</code>
<code>class _ApiExampleState extends State&lt;ApiExample&gt; {</code> <code>&nbsp; List&lt;dynamic&gt; _posts = [];</code>
<code>&nbsp; @override</code> <code>&nbsp; void initState() {</code> <code>&nbsp; &nbsp; super.initState();</code> <code>&nbsp; &nbsp; _fetchPosts();</code> <code>&nbsp; }</code>
<code>&nbsp; Future&lt;void&gt; _fetchPosts() async {</code> <code>&nbsp; &nbsp; try {</code> <code>&nbsp; &nbsp; &nbsp; final dio = Dio(BaseOptions(</code> <code>&nbsp; &nbsp; &nbsp; &nbsp; baseUrl: 'https://jsonplaceholder.typicode.com',</code> <code>&nbsp; &nbsp; &nbsp; &nbsp; connectTimeout: 5000, // 5 seconds</code> <code>&nbsp; &nbsp; &nbsp; &nbsp; receiveTimeout: 5000, // 5 seconds</code> <code>&nbsp; &nbsp; &nbsp; &nbsp; headers: {</code> <code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'Content-Type': 'application/json',</code> <code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'Accept': 'application/json',</code> <code>&nbsp; &nbsp; &nbsp; &nbsp; },</code> <code>&nbsp; &nbsp; &nbsp; ));</code>
<code>&nbsp; &nbsp; &nbsp; final response = await dio.get('/posts', queryParameters: {</code> <code>&nbsp; &nbsp; &nbsp; &nbsp; 'userId': 1,</code> <code>&nbsp; &nbsp; &nbsp; }, options: Options(</code> <code>&nbsp; &nbsp; &nbsp; &nbsp; headers: {</code> <code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'Authorization': 'Bearer token',</code> <code>&nbsp; &nbsp; &nbsp; &nbsp; },</code> <code>&nbsp; &nbsp; &nbsp; ));</code>
<code>&nbsp; &nbsp; &nbsp; if (response.statusCode == 200) {</code> <code>&nbsp; &nbsp; &nbsp; &nbsp; setState(() {</code> <code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _posts = response.data;</code> <code>&nbsp; &nbsp; &nbsp; &nbsp; });</code> <code>&nbsp; &nbsp; &nbsp; } else { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;ScaffoldMessenger.of(context).showSnackBar( &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;SnackBar(content: Text('Error fetching posts')), &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;); &nbsp; &nbsp; &nbsp; }</code> <code>&nbsp; &nbsp; } catch (error) {</code> <code>&nbsp; &nbsp; &nbsp; //print('Error fetching posts: $error'); &nbsp; &nbsp; &nbsp; &nbsp;ScaffoldMessenger.of(context).showSnackBar( &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; SnackBar(content: Text('Error fetching posts: $error')), &nbsp; &nbsp; &nbsp; &nbsp;);</code> <code>&nbsp; &nbsp; }</code> <code>&nbsp; }</code>
<code>&nbsp; @override</code> <code>&nbsp; Widget build(BuildContext context) {</code> <code>&nbsp; &nbsp; return Scaffold(</code> <code>&nbsp; &nbsp; &nbsp; appBar: AppBar(</code> <code>&nbsp; &nbsp; &nbsp; &nbsp; title: Text('API Example'),</code> <code>&nbsp; &nbsp; &nbsp; ),</code> <code>&nbsp; &nbsp; &nbsp; body: ListView.builder(</code> <code>&nbsp; &nbsp; &nbsp; &nbsp; itemCount: _posts.length,</code> <code>&nbsp; &nbsp; &nbsp; &nbsp; itemBuilder: (BuildContext context, int index) {</code> <code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; final post = _posts[index];</code> <code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return ListTile(</code> <code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: Text(post['title']),</code> <code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; subtitle: Text(post['body']),</code> <code>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; );</code> <code>&nbsp; &nbsp; &nbsp; &nbsp; },</code> <code>&nbsp; &nbsp; &nbsp; ),</code> <code>&nbsp; &nbsp; );</code> <code>&nbsp; }</code> <code>}</code>
&nbsp;
ในตัวอย่างโค้ดข้างต้น ฟังก์ชัน <code>_fetchPosts</code> จะกำหนด options ด้วย <code>BaseOptions</code> ซึ่งระบุค่าเช่น <code>baseUrl</code>, <code>connectTimeout</code>, <code>receiveTimeout</code>, และ <code>headers</code> สำหรับการเชื่อมต่อ API ดังนี้
<code>final dio = Dio(BaseOptions(</code> <code>&nbsp; baseUrl: 'https://jsonplaceholder.typicode.com',</code> <code>&nbsp; connectTimeout: 5000, // 5 seconds</code> <code>&nbsp; receiveTimeout: 5000, // 5 seconds</code> <code>&nbsp; headers: {</code> <code>&nbsp; &nbsp; 'Content-Type': 'application/json',</code> <code>&nbsp; &nbsp; 'Accept': 'application/json',</code> <code>&nbsp; },</code> <code>));</code>
&nbsp;
ฟังก์ชัน <code>_fetchPosts</code> ยังใช้ <code>queryParameters</code> เพื่อระบุค่า <code>userId</code> สำหรับการเรียก API เพิ่มเติม ดังนี้
<code>final response = await dio.get('/posts', queryParameters: {</code> <code>&nbsp; 'userId': 1,</code> <code>}, options: Options(</code> <code>&nbsp; headers: {</code> <code>&nbsp; &nbsp; 'Authorization': 'Bearer token',</code> <code>&nbsp; },</code> <code>));</code>
&nbsp;
<div class="group w-full text-gray-800 dark:text-gray-100 border-b border-black/10 dark:border-gray-900/50 bg-gray-50 dark:bg-[#444654]">
<div class="text-base gap-4 md:gap-6 md:max-w-2xl lg:max-w-xl xl:max-w-3xl p-4 md:py-6 flex lg:px-0 m-auto">
<div class="relative flex w-[calc(100%-50px)] flex-col gap-1 md:gap-3 lg:w-[calc(100%-115px)]">
<div class="flex flex-grow flex-col gap-3">
<div class="min-h-[20px] flex flex-col items-start gap-4 whitespace-pre-wrap">
<div class="markdown prose w-full break-words dark:prose-invert light">
สุดท้าย ฟังก์ชัน <code>build</code> จะใช้ ListView.builder เพื่อแสดงผลข้อมูลที่ได้จาก API ตามปกติ
&nbsp;
&nbsp;
&nbsp;
<hr></div>
</div>
</div>
<div class="flex justify-between lg:block">
<div class="text-gray-400 flex self-end lg:self-center justify-center mt-2 gap-2 md:gap-3 lg:gap-1 lg:absolute lg:top-0 lg:translate-x-full lg:right-0 lg:mt-0 lg:pl-2 visible">&nbsp;</div>
</div>
</div>
</div>
</div>

Content Short

Content Img Alt

Content Tag

อัพโหลดรูปภาพ

สำหรับ SEO

Meta Title

Meta Desc

Meta Keyword

Og Title

Og Desc

สถานะเปิดใช้งานบทความ

Back home