PricingLoginStart free
Jetpack Compose Academy · บทเรียน

ส่วนติดต่อผู้ใช้สถานะกำลังโหลด สำเร็จ และข้อผิดพลาด

แสดงผลลัพธ์จากเครือข่ายทุกแบบอย่างเป็นระเบียบ

บทเรียน 4 จาก 413 ขั้นตอน

ส่วนติดต่อผู้ใช้สถานะกำลังโหลด สำเร็จ และข้อผิดพลาด เป็นบทเรียน Jetpack Compose Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Jetpack Compose Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน

ทุกคำขอมีผลลัพธ์ได้สามแบบ

คำขอเครือข่ายอาจยังอยู่ระหว่าง loading เสร็จสมบูรณ์พร้อมข้อมูล หรือล้มเหลว หน้าจอที่ดีจะแสดงสิ่งที่เหมาะสมและตรงไปตรงมาสำหรับทั้งสามกรณี

จำลองสถานะด้วย Sealed Class

sealed class จะบันทึกผลลัพธ์เหล่านั้นเป็นชนิดข้อมูลที่แตกต่างกัน ทำให้คอมไพเลอร์บังคับให้คุณจัดการทุกกรณีในส่วนติดต่อผู้ใช้

sealed class UiState {
    object Loading : UiState()
    data class Success(val users: List<User>) : UiState()
    data class Error(val message: String) : UiState()
}

เริ่มต้นด้วยสถานะกำลังโหลด

กำหนดสถานะเริ่มต้นเป็น Loading เพื่อให้หน้าจอแสดงตัวหมุนทันทีที่ปรากฏ ก่อนที่ข้อมูลใด ๆ จะมาถึง

var state by mutableStateOf<UiState>(UiState.Loading)

อัปเดตเมื่อสำเร็จ

เมื่อคำขอส่งผลลัพธ์กลับมา ให้เปลี่ยนสถานะเป็น Success พร้อมรายการที่ดึงมา Compose จะสร้างองค์ประกอบใหม่และแสดงเนื้อหา

state = UiState.Success(api.getUsers())

อัปเดตเมื่อเกิดข้อผิดพลาด

ในบล็อก catch ให้เปลี่ยนเป็นสถานะ Error พร้อมข้อความที่เป็นมิตร แทนการปล่อยให้ผู้ใช้ติดอยู่กับตัวหมุน

catch (e: Exception) {
    state = UiState.Error("Couldn't load users")
}

แยกกรณีด้วย when

ใน Composable ให้ใช้ when กับสถานะ แต่ละแขนงจะแสดงส่วนติดต่อผู้ใช้ที่ตรงกับผลลัพธ์นั้นโดยเฉพาะ

when (val s = state) {
    is UiState.Loading -> { }
    is UiState.Success -> { }
    is UiState.Error -> { }
}

แสดงตัวหมุนระหว่างการโหลด

สำหรับแขนงการโหลด CircularProgressIndicator ที่อยู่ตรงกลางจะช่วยให้ผู้ใช้มั่นใจว่าระบบกำลังทำงานอยู่ ⏳

is UiState.Loading -> CircularProgressIndicator()

แสดงข้อมูลเมื่อสำเร็จ

แขนงสำเร็จจะอ่านรายการและวาดรายการนั้น โดยทั่วไปจะใช้ LazyColumn เพื่อให้ผลลัพธ์จำนวนมากเลื่อนได้อย่างราบรื่น

is UiState.Success -> UserList(s.users)

เสนอให้ลองใหม่เมื่อเกิดข้อผิดพลาด

สาขาข้อผิดพลาดควรแสดงข้อความพร้อมปุ่ม ลองอีกครั้ง ที่เรียกใช้ฟังก์ชันโหลดของคุณใหม่ ความล้มเหลวไม่ควรเป็นทางตัน

is UiState.Error -> RetryView(s.message, ::loadUsers)

จัดการกรณีรายการว่าง

ความสำเร็จไม่ได้หมายความว่าจะมีรายการเสมอไป เมื่อรายการว่างเปล่า ให้แสดง สถานะว่าง ที่ดูสบายตาแทนหน้าจอเปล่า

สถานะเดียวขับเคลื่อนทั้งหน้าจอ

เนื่องจากออบเจ็กต์ สถานะ เดียวเป็นตัวตัดสินทุกอย่าง UI ของคุณจึงไม่สามารถแสดงตัวหมุนโหลดพร้อมกับข้อมูลในเวลาเดียวกันได้ ทำให้การทำงานคาดเดาได้

ตรวจสอบสั้น ๆ

เหตุใดจึงควรจำลองสถานะกำลังโหลด สำเร็จ และข้อผิดพลาดเป็นคลาสปิดผนึก

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป: แสดงผลทุกผลลัพธ์

คุณจำลองสถานะเป็น คลาสปิดผนึก ใช้ when แยกกรณี และแสดงสถานะกำลังโหลด ข้อมูล ข้อผิดพลาด และรายการว่าง ตอนนี้คุณสามารถส่งมอบหน้าจอเครือข่ายที่ทนทานได้แล้ว

เริ่มต้นได้ฟรี

เรียนรู้ Kotlin ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
30
บทเรียน
120
เริ่มเรียนฟรีดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “ส่วนติดต่อผู้ใช้สถานะกำลังโหลด สำเร็จ และข้อผิดพลาด” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ส่วนติดต่อผู้ใช้สถานะกำลังโหลด สำเร็จ และข้อผิดพลาด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Jetpack Compose Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ส่วนติดต่อผู้ใช้สถานะกำลังโหลด สำเร็จ และข้อผิดพลาด”

แสดงผลลัพธ์จากเครือข่ายทุกแบบอย่างเป็นระเบียบ คุณปฏิบัติ Jetpack Compose Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Jetpack Compose Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Jetpack Compose Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “ส่วนติดต่อผู้ใช้สถานะกำลังโหลด สำเร็จ และข้อผิดพลาด” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Jetpack Compose Academy นี้ได้ไหม

ได้ บทเรียน Jetpack Compose Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. กำหนดอินเทอร์เฟซ API ของ Retrofit
  2. แยกวิเคราะห์ JSON ด้วย Moshi
  3. การเรียกแบบ suspend ใน ViewModel
  4. ส่วนติดต่อผู้ใช้สถานะกำลังโหลด สำเร็จ และข้อผิดพลาด
← กลับไปที่ Jetpack Compose Academy