.task { } — คืออะไร, ตัวปรับแก้ async และการโหลดข้อมูลใน View

.task { } ใน SwiftUI คืออะไร

.task { } คือตัวปรับแก้ View ที่สร้าง Task ในบริบท async เมื่อ View ปรากฏขึ้นบนหน้าจอ SwiftUI จะดำเนินการ closure ที่ให้ไว้ในเธรดพื้นหลัง โดยปล่อยให้เธรดหลักว่างสำหรับการดำเนินการ UI เมื่อ View หายไป SwiftUI จะยกเลิก Task โดยอัตโนมัติผ่านกลไก Structured Concurrency — ซึ่งรับประกันว่าการดำเนินการแบบอะซิงโครนัสจะไม่ทำงานต่อหลังจากที่ไม่ต้องการผลลัพธ์อีกต่อไป

ตามข้อมูลจาก Apple — Swift Programming Language (2025) .task ใช้แนวคิดของ Structured Concurrency ที่นำมาใช้ใน Swift 5.5 แต่ละ .task สร้างงานย่อยภายใต้งานของ View หลัก หากงานหลักถูกยกเลิก (View หายไป) งานย่อยทั้งหมดก็จะถูกยกเลิกโดยอัตโนมัติเช่นกัน ซึ่งช่วยลดความซับซ้อนในการจัดการวงจรชีวิตของการดำเนินการแบบอะซิงโครนัสเมื่อเทียบกับการเก็บข้อมูลอ้างอิงไปยัง DispatchWorkItem หรือ AnyCancellable ด้วยตนเอง

แตกต่างจากวิธีการดั้งเดิมด้วย @State + การเรียกด้วยตนเองใน .onAppear .task ไม่จำเป็นต้องเก็บข้อมูลอ้างอิงไปยัง Task สำหรับการยกเลิกในภายหลัง SwiftUI ทำสิ่งนี้โดยอัตโนมัติ ลดโค้ดเทมเพลตและขจัดความเสี่ยงในการลืมยกเลิกงาน

struct ArticlesView: View {
    @State var articles: [Article] = []
    @State var error: Error?
    
    var body: some View {
        List(articles) { article in
            Text(article.title)
        }
        .task {
            do {
                articles = await APIClient().fetchArticles()
            } catch {
                self.error = error
            }
        }
    }
}

.task vs .onAppear: ความแตกต่างหลัก

นักพัฒนาหลายคนคุ้นเคยกับการโหลดข้อมูลใน .onAppear แต่ด้วยการมาของ async/await และ .task วิธีการนี้จึงล้าสมัย .onAppear ดำเนินการโค้ดแบบซิงโครนัส — สำหรับการดำเนินการแบบอะซิงโครนัสภายใน .onAppear จำเป็นต้องห่อการเรียกใน Task { } และเก็บข้อมูลอ้างอิงด้วยตนเองสำหรับการยกเลิกที่เป็นไปได้ .task ทำสิ่งนี้โดยอัตโนมัติ

.onAppear ยังคงมีประโยชน์สำหรับการดำเนินการแบบซิงโครนัส — ตัวอย่างเช่น การบันทึกหรือการตั้งค่า UI เริ่มต้น แต่สำหรับการโหลดข้อมูลแบบอะซิงโครนัส คำขอเครือข่าย การทำงานกับฐานข้อมูลหรือระบบไฟล์ ให้ใช้ .task ซึ่งปลอดภัยกว่าและสะอาดกว่าจากมุมมองทางสถาปัตยกรรม

// ❌ วิธีเดิม: Task ใน .onAppear โดยไม่มีการยกเลิก
var loadTask: Task<Void, Never>?
func body() { var body: some View { Text("") }
    .onAppear {
        loadTask = Task { await loadData() }
    }
    .onDisappear { loadTask?.cancel() }

// ✅ วิธีสมัยใหม่: .task จัดการการยกเลิก
func body() { var body: some View { Text("") }
    .task { await loadData() }

.task(id:) — เริ่มใหม่เมื่อข้อมูลเปลี่ยนแปลง

ตัวปรับแก้ .task(id:) ยอมรับพารามิเตอร์เพิ่มเติม — ตัวระบุ เมื่อค่าของตัวระบุเปลี่ยนแปลง SwiftUI จะยกเลิกงานปัจจุบันและเริ่มงานใหม่ด้วยตัวระบุใหม่ ซึ่งเหมาะสำหรับหน้าจอที่ข้อมูลขึ้นอยู่กับพารามิเตอร์ที่เลือก — ตัวอย่างเช่น รายการบทความตามหมวดหมู่หรือรายละเอียดสินค้าตาม ID

struct CategoryView: View {
    let categoryId: Int
    @State var items: [Item] = []
    
    var body: some View {
        List(items) { item in
            Text(item.name)
        }
        .task(id: categoryId) {
            await loadItems(for: categoryId)
        }
    }
    
    func loadItems(for id: Int) async {
        do {
            items = await APIClient().fetchItems(categoryId: id)
        } catch {
            // จัดการข้อผิดพลาด
        }
    }
}

เมื่อ categoryId เปลี่ยนแปลง SwiftUI จะยกเลิกคำขอก่อนหน้าและเริ่มคำขอใหม่ ซึ่งสำคัญอย่างยิ่งเมื่อสลับหมวดหมู่อย่างรวดเร็ว — คำขอเก่าจะไม่แข่งขันกับคำขอใหม่ในการอัปเดตสถานะ หากไม่มี .task(id:) คุณจะต้องติดตามการเปลี่ยนแปลงด้วยตนเองผ่าน .onChange และจัดการ Task ด้วยตนเอง

การยกเลิกงานและการตรวจสอบ isCancelled

แม้ว่า .task จะยกเลิกงานโดยอัตโนมัติเมื่อ View หายไป แต่การดำเนินการแบบอะซิงโครนัสจะต้องตรวจสอบการยกเลิกแบบร่วมมือกัน Swift ใช้โมเดลการยกเลิกแบบร่วมมือ — Task.cancel() ไม่ได้หยุดการทำงานโดยบังคับ แต่เพียงตั้งค่าแฟล็ก isCancelled เท่านั้น โค้ดภายในงานควรตรวจสอบแฟล็กนี้เป็นระยะ

struct LoadingView: View {
    @State var progress: Double = 0
    
    var body: some View {
        ProgressView(value: progress)
            .task {
                for i in 0..<100 {
                    // ตรวจสอบการยกเลิก
                    try Task.checkCancellation()
                    
                    await Task.sleep(nanoseconds: 50_000_000)
                    progress = Double(i + 1) / 100.0
                }
            }
    }
}

Task.checkCancellation() จะโยน CancellationError หากงานถูกยกเลิก นี่เป็นวิธีตรวจสอบที่ง่ายที่สุด — ทำงานในบริบท async ใดๆ ทางเลือกคือตรวจสอบ Task.isCancelled ด้วยตนเองก่อนดำเนินการที่มีค่าใช้จ่ายสูง สำหรับ URLSession คำขอเครือข่ายจะถูกยกเลิกโดยอัตโนมัติเมื่องานถูกยกเลิก เนื่องจาก URLSession รองรับ Structured Concurrency ตั้งแต่เริ่มต้น

ตัวอย่างการใช้งาน .task

.task เหมาะสำหรับหลายสถานการณ์: ตั้งแต่การโหลด JSON อย่างง่ายไปจนถึงการดำเนินการแบบขนานที่ซับซ้อนด้วย TaskGroup มาดูสามกรณีการใช้งานทั่วไป

การโหลดพร้อมจัดการข้อผิดพลาด

struct ProfileView: View {
    @State var profile: Profile?
    @State var isLoading = true
    
    var body: some View {
        Group {
            if isLoading {
                ProgressView()
            } else if let profile {
                Text(profile.name)
            } else {
                Text("โหลดล้มเหลว")
            }
        }
        .task {
            defer { isLoading = false }
            do {
                profile = await APIClient().fetchProfile()
            } catch {
                // โปรไฟล์ยังคงเป็น nil
            }
        }
    }
}

การโหลดแบบขนานด้วย TaskGroup

struct DashboardView: View {
    @State var stats: DashboardStats?
    
    var body: some View {
        Text("แดชบอร์ด")
            .task {
                stats = await Task {
                    await withThrowingTaskGroup { group in
                        group.addTask { await API().fetchUsers() }
                        group.addTask { await API().fetchOrders() }
                        group.addTask { await API().fetchRevenue() }
                        
                        return DashboardStats(
                            users: try await group.next(),
                            orders: try await group.next(),
                            revenue: try await group.next()
                        )
                    }
                }.value
            }
    }
}

ข้อผิดพลาดทั่วไปกับ .task

ข้อผิดพลาดที่พบบ่อยที่สุดคือการเปลี่ยนแปลงคุณสมบัติ UI ภายใน .task โดยไม่สลับไปยังเธรดหลัก แม้ว่า SwiftUI จะส่งคืนการอัปเดตไปยังเธรดหลักโดยอัตโนมัติเมื่อแก้ไข @State ในบริบท async แต่การจัดการองค์ประกอบ UIKit โดยตรงภายใน .task อาจทำให้เกิดการหยุดทำงาน

• ลืม try/catch — .task ไม่จัดการข้อผิดพลาดโดยอัตโนมัติ ฟังก์ชันที่โยนข้อผิดพลาดทั้งหมดต้องถูกห่อใน do/catch มิฉะนั้นแอปจะหยุดทำงาน
• สภาพแข่งขัน — หาก .task(id:) หลายตัวเริ่มทำงานด้วย id ที่แตกต่างกันและอัปเดตสถานะเดียวกัน อาจเกิดสภาพแข่งขันได้ ใช้คุณสมบัติแยกกันสำหรับแหล่งข้อมูลที่แตกต่างกัน
• การดำเนินการแบบซิงโครนัสที่ยาวนาน — .task ไม่ได้ทำให้โค้ดแบบซิงโครนัสกลายเป็นอะซิงโครนัส หากมีงานซิงโครนัสที่หนักภายใน .task ให้ห่อใน Task.detached หรือย้ายไปยังเมธอด async แยกต่างหาก
• ละเว้น CancellationError — เมื่อตรวจสอบ Task.checkCancellation() ควรส่ง CancellationError ขึ้นไปข้างบน ไม่ใช่ระงับไว้ การระงับการยกเลิกอาจนำไปสู่การรั่วไหลของหน่วยความจำ

// ❌ ข้อผิดพลาด: ไม่มีการจัดการข้อผิดพลาด
.task {
    let data = await fetchData() // หยุดทำงานเมื่อมีข้อผิดพลาด!
    items = data
}

// ✅ ถูกต้อง: do/catch
.task {
    do {
        items = await fetchData()
    } catch {
        errorMessage = error.localizedDescription
    }
}