วิธีการเรียก Async GET REST API อย่างง่ายใน SwiftUI

ในบทช่วยสอนสำหรับผู้เริ่มต้นนี้ คุณจะได้เรียนรู้พื้นฐานของการใช้ SwiftUI เพื่อทำการเรียก API โดยใช้ Internet Chuck Norris DataBase (ICNDB) ยอดนิยมเป็นตัวอย่าง จะแสดงเรื่องตลกอย่างรวดเร็วและง่ายดายโดยใช้ Swift และ SwiftUI

คุณจะเห็นว่าเฟรมเวิร์กข้ามแพลตฟอร์ม SwiftUI ช่วยให้เราใช้โค้ดเดียวกันใน iOS, iPadOS, macOS, watchOS, App Clips และ tvOS ได้อย่างไร ซึ่งหากเป็นอย่างอื่นคงเป็นไปไม่ได้

นอกจากนั้น คุณจะใช้ async-await ที่เปิดตัวใน Swift 5.5 ซึ่งใช้งานได้กับระบบปฏิบัติการที่ใหม่กว่า รวมถึง iPhone ที่ใช้ iOS> v15.0 สิ่งนี้ช่วยลดความยุ่งยากในการทำงานของเราในการเรียกเครือข่ายข้อมูลแบบอะซิงโครนัสเมื่อคลิกปุ่มโดยไม่ทำให้เธรด UI ค้าง

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

วิธีการโทร API ใน Swift และ SwiftUI

ขั้นแรก คุณต้องมี Mac เพื่อติดตั้ง Xcode เมื่อติดตั้งแล้ว ให้เปิด Xcode และสร้างโครงการใหม่ จากนั้นเลือก "แอป" สำหรับ iOS, macOS, tvOS หรือ watchOS

ContentView

เพียงอัปเดตไฟล์ ContentView SwiftUI ที่มีอยู่ของคุณเพื่อเพิ่มปุ่มและใช้ State ตัวแปรเพื่อรีเฟรชข้อความที่แสดงเป็นเรื่องตลกที่ส่งคืนจาก ICNDB API:

import Foundation
import SwiftUI
struct ContentView: View {
    @State private var joke: String = ""
    var body: some View {
        Text(joke)
        Button {
            Task {
                let (data, _) = try await URLSession.shared.data(from: URL(string:"https://api.chucknorris.io/jokes/random")!)
                let decodedResponse = try? JSONDecoder().decode(Joke.self, from: data)
                joke = decodedResponse?.value ?? ""
            }
        } label: {
            Text("Fetch Joke")
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
struct Joke: Codable {
    let value: String
}

หาเรื่องตลก!

หากคุณกดสร้าง/เล่น แอปจะสร้างในแพลตฟอร์มใดก็ตามที่คุณเลือกด้านบน:

การวิเคราะห์โค้ด

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

ตามนั้น คุณกำหนดรหัสด้านบน คุณใช้โปรโตคอล Codable (หรือที่เรียกว่าอินเทอร์เฟซ) เพื่อเปลี่ยนจากวัตถุข้อมูล JSON เป็นคลาสหรือโครงสร้าง Swift จริง และคุณสร้างคุณสมบัติสำหรับข้อมูลที่คุณต้องการจัดเก็บ (ค่าในกรณีของเรา)

JSONDecoder ช่วยเราแยกวิเคราะห์สตริง JSON โดยใช้อ็อบเจ็กต์ Codable ใช้งานได้โดยไม่คำนึงถึงแพลตฟอร์มเพราะหน้าที่โหลดเมื่อเปิดแอปมีชื่อเหมือนกัน ContentView โดยไม่คำนึงถึงแพลตฟอร์ม

แอปคลิป

App Clips เป็นวิธีการใหม่ล่าสุดของ Apple ในการใช้ฟังก์ชันการทำงานของแอปแบบเนทีฟโดยใช้ "App Clip Code" โดยไม่ต้องดาวน์โหลดแอปพลิเคชันทั้งหมดจาก App Store

App Clips ทำงานคล้ายกับแอป iOS ข้อแตกต่างเพียงอย่างเดียวคือคุณไม่ต้องสร้างโปรเจ็กต์ App Clip ใหม่ คุณเพียงแค่ต้องเพิ่ม App Clip เป็นเป้าหมายให้กับแอป iOS ที่มีอยู่โดยไปที่ File->New->Target->iOS->App Clip เมื่อแอป iOS ที่มีอยู่เปิดอยู่ใน Xcode

หากคุณสงสัยเกี่ยวกับวิดเจ็ตของ iPhone/iPad วิดเจ็ตเหล่านี้จะไม่เคลื่อนไหว ดังนั้นการคลิกปุ่มจะเปิดแอปที่เกี่ยวข้องและไม่สามารถอัปเดตข้อความผ่าน API ภายนอกได้อย่างอิสระ

บทสรุป

ในบทความนี้ คุณได้เรียนรู้วิธีเรียกใช้ RESTful GET API จาก SwiftUI ด้วยวิธีที่ง่ายที่สุด!

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