วิธีเพิ่มประสิทธิภาพการดำเนินงานแบบ Asynchronous ใน Flutter ด้วย Future.wait และ Back4app

บทนำ การเขียนโปรแกรมแบบอะซิงโครนัสเป็นสิ่งสำคัญในพัฒนาแอปสมัยใหม่ โดยเฉพาะเมื่อจัดการกับงานต่างๆ เช่น การดึงข้อมูลจากหลายแหล่งหรือการทำคำขอเครือข่ายหลายรายการ อย่างไรก็ตาม การจัดการกับการเรียกแบบอะซิงโครนัสหลายรายการอย่างมีประสิทธิภาพอาจเป็นเรื่องท้าทาย ใน flutter, future wait เป็นวิธีที่ทรงพลังในการจัดการกับ futures , ช่วยให้แอปของคุณสามารถรอการดำเนินการแบบอะซิงโครนัสหลายรายการพร้อมกันและมีประสิทธิภาพ ในบทเรียนนี้ คุณจะได้เรียนรู้วิธีการใช้ future wait ใน flutter เพื่อเพิ่มประสิทธิภาพของแอปของคุณเมื่อจัดการกับงานอะซิงโครนัสหลายรายการ เราจะรวมเทคนิคนี้เข้ากับ back4app ซึ่งคุณสามารถทำการดึงข้อมูลพร้อมกันจากแบ็กเอนด์ของคุณ เก็บผลลัพธ์ และลดเวลารอคอยสำหรับผู้ใช้ของคุณอย่างมีนัยสำคัญ ข้อกำหนดเบื้องต้น เพื่อให้เสร็จสิ้นบทเรียนนี้ คุณจะต้องมี บัญชี back4app ลงทะเบียนสำหรับบัญชีฟรีที่ back4app com https //www back4app com ตั้งค่าสภาพแวดล้อมการพัฒนา flutter บนเครื่องของคุณเอง โปรดดูที่ คู่มือการติดตั้ง flutter https //flutter dev/docs/get started/install หากคุณยังไม่ได้ตั้งค่า ความรู้พื้นฐานเกี่ยวกับการเขียนโปรแกรมแบบอะซิงโครนัสใน flutter และวิธีการใช้ back4app เป็นบริการแบ็กเอนด์ หากคุณเป็นมือใหม่ใน back4app โปรดดูที่ คู่มือเริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/welcome ขั้นตอนที่ 1 – การตั้งค่า backend ของ back4app สร้างโปรเจกต์ back4app เข้าสู่ระบบบัญชีของคุณ บัญชี back4app https //dashboard back4app com/ และสร้างโปรเจกต์ใหม่ สร้างคลาส parse ในโปรเจกต์ back4app ของคุณ สร้างคลาส parse ใหม่สองคลาสชื่อ task และ project คลาส task ควรมีฟิลด์ name (string) และ completed (boolean) คลาส project ควรมีฟิลด์ title (string) และ description (string) เพิ่มข้อมูลตัวอย่าง เติมข้อมูลในคลาสเหล่านี้ด้วยข้อมูลตัวอย่างที่เราจะดึงข้อมูลพร้อมกันโดยใช้ future wait ในแอป flutter ของเรา รับข้อมูลประจำตัว back4app ของคุณ ไปที่การตั้งค่าโปรเจกต์ของคุณเพื่อดึง application id และ client key ซึ่งคุณจะต้องใช้เพื่อเชื่อมต่อแอป flutter ของคุณกับ back4app ขั้นตอนที่ 2 – การตั้งค่าโปรเจกต์ flutter ของคุณ สร้างโปรเจกต์ flutter ใหม่ เปิดเทอร์มินัลหรือพรอมต์คำสั่งของคุณและรัน เพิ่ม dependencies เปิด pubspec yaml และเพิ่ม dependencies ต่อไปนี้ เริ่มต้น parse ในแอปของคุณ ใน lib/main dart , นำเข้า parse sdk และเริ่มต้นในฟังก์ชัน main const keyapplicationid = 'your back4app app id'; const keyclientkey = 'your back4app client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize(keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true); runapp(myapp()); แทนที่ 'your back4app app id' และ 'your back4app client key' ด้วยข้อมูลรับรอง back4app ที่แท้จริงของคุณ ขั้นตอนที่ 3 – ดึงข้อมูลพร้อมกันด้วย future wait สร้าง widget taskprojectscreen ใน lib/main dart , เพิ่ม widget ใหม่ที่จะดึงข้อมูลจากทั้ง task และ project พร้อมกัน class taskprojectscreen extends statefulwidget { @override taskprojectscreenstate createstate() => taskprojectscreenstate(); } class taskprojectscreenstate extends state\<taskprojectscreen> { list\<parseobject>? tasks; list\<parseobject>? projects; string? errormessage; @override void initstate() { super initstate(); fetchdata(); } future\<void> fetchdata() async { try { // fetch tasks and projects concurrently final futures = \[ gettasks(), getprojects(), ]; final results = await future wait(futures); setstate(() { tasks = results\[0] as list\<parseobject>; projects = results\[1] as list\<parseobject>; }); } catch (e) { setstate(() { errormessage = e tostring(); }); } } future\<list\<parseobject>> gettasks() async { final query = querybuilder\<parseobject>(parseobject('task')); final response = await query query(); if (response success && response results != null) { return response results as list\<parseobject>; } else { throw exception('failed to load tasks'); } } future\<list\<parseobject>> getprojects() async { final query = querybuilder\<parseobject>(parseobject('project')); final response = await query query(); if (response success && response results != null) { return response results as list\<parseobject>; } else { throw exception('failed to load projects'); } } @override widget build(buildcontext context) { if (errormessage != null) { return center(child text('error $errormessage')); } if (tasks == null || projects == null) { return center(child circularprogressindicator()); } return listview( children \[ listtile(title text('tasks')), tasks! map((task) => listtile( title text(task get\<string>('name') ?? 'no name'), subtitle text('completed ${task get\<bool>('completed') ? 'yes' 'no'}'), )), listtile(title text('projects')), projects! map((project) => listtile( title text(project get\<string>('title') ?? 'no title'), subtitle text(project get\<string>('description') ?? 'no description'), )), ], ); } } widget นี้ดึงข้อมูลงานและโครงการพร้อมกันโดยใช้ future wait , ลดเวลารอรวมโดยการจัดการคำขอทั้งสองพร้อมกัน ขั้นตอนที่ 4 – การทดสอบและรันแอปของคุณ รันแอปของคุณโดยใช้ flutter run คุณควรเห็นรายการของงานและโครงการที่แสดงบนหน้าจอ ข้อมูลทั้งสองชุดจะถูกดึงข้อมูลพร้อมกัน ทำให้กระบวนการดึงข้อมูลรวดเร็วและมีประสิทธิภาพมากขึ้น บทสรุป ในบทเรียนนี้ คุณได้เรียนรู้วิธีการใช้ future wait เพื่อเพิ่มประสิทธิภาพการทำงานแบบอะซิงโครนัสในแอป flutter ของคุณ โดยการดึงข้อมูลจากหลายแหล่งพร้อมกันและรวมเข้ากับ back4app ทำให้แอปของคุณตอบสนองได้ดีขึ้นและลดเวลารอโดยรวมสำหรับผู้ใช้ของคุณ การใช้ future wait ร่วมกับแบ็คเอนด์ที่แข็งแกร่งอย่าง back4app ช่วยให้คุณจัดการงานอะซิงโครนัสหลายงานได้อย่างมีประสิทธิภาพและปรับปรุงประสิทธิภาพของแอป flutter ของคุณ สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับการใช้ back4app กับ flutter โปรดดูที่ เอกสาร back4app flutter https //www back4app com/docs/flutter/overview ขอให้สนุกกับการเขียนโค้ด!