Taninut.com
| Content ID | 143 |
|---|---|
| Category ID | 3 |
| Writer ID | (not set) |
| User ID | (not set) |
| Lang Mode | th |
| Content Name | Dio package การกำหนด options BaseOptions, queryParameters ในการส่ง request แบบ GET |
| Content Url | Dio-package-การกำหนด-options-BaseOptions-queryParameters-ในการส่ง-request-แบบ-GET |
| Content Desc | <p>การกำหนด options BaseOptions, queryParameters ในการส่ง request แบบ GET ใน Dio package สามารถทำได้ดังนี้</p> <p>ตัวอย่างที่ 1 :</p> <p style="padding-left: 40px;"><code>import 'package:flutter/material.dart';</code><br><code>import 'package:dio/dio.dart';</code></p> <p style="padding-left: 40px;"><code>class ApiExample extends StatefulWidget {</code><br><code> @override</code><br><code> _ApiExampleState createState() => _ApiExampleState();</code><br><code>}</code></p> <p style="padding-left: 40px;"><code>class _ApiExampleState extends State<ApiExample> {</code><br><code> List<dynamic> _posts = [];</code></p> <p style="padding-left: 40px;"><code> @override</code><br><code> void initState() {</code><br><code> super.initState();</code><br><code> _fetchPosts();</code><br><code> }</code></p> <p style="padding-left: 40px;"><code> Future<void> _fetchPosts() async {</code><br><code> try {</code><br><code> final dio = Dio(BaseOptions(</code><br><code> baseUrl: 'https://jsonplaceholder.typicode.com',</code><br><code> connectTimeout: 5000, // 5 seconds</code><br><code> receiveTimeout: 5000, // 5 seconds</code><br><code> headers: {</code><br><code> 'Content-Type': 'application/json',</code><br><code> 'Accept': 'application/json',</code><br><code> },</code><br><code> ));</code></p> <p style="padding-left: 40px;"><code> final response = await dio.get('/posts', queryParameters: {</code><br><code> 'userId': 1,</code><br><code> }, options: Options(</code><br><code> headers: {</code><br><code> 'Authorization': 'Bearer token',</code><br><code> },</code><br><code> ));</code></p> <p style="padding-left: 40px;"><code> if (response.statusCode == 200) {</code><br><code> setState(() {</code><br><code> _posts = response.data;</code><br><code> });</code><br><code> } else { <br> ScaffoldMessenger.of(context).showSnackBar( <br> SnackBar(content: Text('Error fetching posts')), <br> ); <br> }</code><br><code> } catch (error) {</code><br><code> //print('Error fetching posts: $error');<br> ScaffoldMessenger.of(context).showSnackBar( <br> SnackBar(content: Text('Error fetching posts: $error')), <br> );</code><br><code> }</code><br><code> }</code></p> <p style="padding-left: 40px;"><code> @override</code><br><code> Widget build(BuildContext context) {</code><br><code> return Scaffold(</code><br><code> appBar: AppBar(</code><br><code> title: Text('API Example'),</code><br><code> ),</code><br><code> body: ListView.builder(</code><br><code> itemCount: _posts.length,</code><br><code> itemBuilder: (BuildContext context, int index) {</code><br><code> final post = _posts[index];</code><br><code> return ListTile(</code><br><code> title: Text(post['title']),</code><br><code> subtitle: Text(post['body']),</code><br><code> );</code><br><code> },</code><br><code> ),</code><br><code> );</code><br><code> }</code><br><code>}</code></p> <p style="padding-left: 40px;"> </p> <p>ในตัวอย่างโค้ดข้างต้น ฟังก์ชัน <code>_fetchPosts</code> จะกำหนด options ด้วย <code>BaseOptions</code> ซึ่งระบุค่าเช่น <code>baseUrl</code>, <code>connectTimeout</code>, <code>receiveTimeout</code>, และ <code>headers</code> สำหรับการเชื่อมต่อ API ดังนี้</p> <p style="padding-left: 40px;"><code>final dio = Dio(BaseOptions(</code><br><code> baseUrl: 'https://jsonplaceholder.typicode.com',</code><br><code> connectTimeout: 5000, // 5 seconds</code><br><code> receiveTimeout: 5000, // 5 seconds</code><br><code> headers: {</code><br><code> 'Content-Type': 'application/json',</code><br><code> 'Accept': 'application/json',</code><br><code> },</code><br><code>));</code></p> <p style="padding-left: 40px;"> </p> <p>ฟังก์ชัน <code>_fetchPosts</code> ยังใช้ <code>queryParameters</code> เพื่อระบุค่า <code>userId</code> สำหรับการเรียก API เพิ่มเติม ดังนี้</p> <p style="padding-left: 40px;"><code>final response = await dio.get('/posts', queryParameters: {</code><br><code> 'userId': 1,</code><br><code>}, options: Options(</code><br><code> headers: {</code><br><code> 'Authorization': 'Bearer token',</code><br><code> },</code><br><code>));</code></p> <p style="padding-left: 40px;"> </p> <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"> <p>สุดท้าย ฟังก์ชัน <code>build</code> จะใช้ ListView.builder เพื่อแสดงผลข้อมูลที่ได้จาก API ตามปกติ</p> <p> </p> <p> </p> <p> </p> <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"> </div> </div> </div> </div> </div> |
| Content Short | |
| Content View | 2548 |
| Content Thumb Highlight | |
| Content Thumb | /uploads/article/zGE9Q7e3PB.png |
| Content Img Alt | Dio package การกำหนด options BaseOptions, queryParameters ในการส่ง request แบบ GET |
| Content Tag | |
| Content Date | (not set) |
| Active Status | 1 |
| Sort | 99999 |
| Meta Title | Dio package การกำหนด options BaseOptions, queryParameters ในการส่ง request แบบ GET |
| Meta Desc | Dio package การกำหนด options BaseOptions, queryParameters ในการส่ง request แบบ GET |
| Meta Keyword | Dio package,BaseOptions,queryParameters,Flutter |
| Og Title | Dio package การกำหนด options BaseOptions, queryParameters ในการส่ง request แบบ GET |
| Og Desc | Dio package การกำหนด options BaseOptions, queryParameters ในการส่ง request แบบ GET |
| Status | 1 |
| Create Date Time | 2023-03-30 12:55:46 |
| Update Date Time | 2023-04-01 13:08:13 |
| Create By | |
| Update By |
แดชบอร์ดรวม
ประวัติการจอง
การตั้งค่า
ออกจากระบบ