Cách thực hiện lệnh gọi API GET REST không đồng bộ đơn giản trong SwiftUI

Trong hướng dẫn dành cho người mới bắt đầu này, bạn sẽ tìm hiểu những kiến ​​thức cơ bản về cách sử dụng SwiftUI để thực hiện lệnh gọi API bằng cách sử dụng Internet Chuck Norris DataBase (ICNDB) phổ biến làm ví dụ. Nó sẽ hiển thị một trò đùa một cách nhanh chóng và dễ dàng bằng Swift và SwiftUI.

Bạn sẽ thấy cách mà khuôn khổ đa nền tảng SwiftUI cho phép chúng tôi sử dụng cùng một mã chính xác trên iOS, iPadOS, macOS, watchOS, App Clips và tvOS, điều này nếu không thì sẽ không thể.

Cùng với đó, bạn sẽ sử dụng async-await đã được giới thiệu trong Swift 5.5, hoạt động cho các hệ điều hành mới hơn bao gồm iPhone chạy iOS> v15.0. Điều này thực sự đơn giản hóa công việc của chúng tôi trong việc thực hiện các cuộc gọi mạng dữ liệu không đồng bộ khi nhấp vào một nút mà không đóng băng chuỗi giao diện người dùng.

Tôi sẽ chia sẻ những thay đổi mã mà bạn cần thực hiện trước tiên. Sau đó, trong phần sau, tôi sẽ chia sẻ một phân tích ngắn gọn về mã để người mới bắt đầu cũng có thể hiểu được những gì đang xảy ra.

Cách thực hiện lệnh gọi API trong Swift và SwiftUI

Trước tiên, bạn sẽ cần một máy Mac để cài đặt Xcode. Sau khi nó được cài đặt, hãy mở Xcode và tạo một dự án mới. Sau đó, chọn "Ứng dụng" cho iOS, macOS, tvOS hoặc watchOS.

ContentView

Chỉ cần cập nhật tệp SwiftUI ContentView hiện có của bạn để thêm Nút và sử dụng Trạng thái biến để làm mới văn bản được hiển thị khi trò đùa trả về từ API ICNDB:

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
}

Tìm hiểu một trò đùa!

Nếu bạn nhấn xây dựng / phát, ứng dụng sẽ xây dựng trên bất kỳ nền tảng nào bạn đã chọn ở trên:

Phân tích mã

Nếu bạn truy cập URL trò đùa ngẫu nhiên, bạn sẽ nhận thấy rằng dữ liệu ở định dạng JSON. Bạn có thể sao chép nó và sử dụng JSON Linter để xem cấu trúc của nó để tìm ra thuộc tính nào của đối tượng Joke là cần thiết.

Dựa vào đó, bạn xác định đoạn mã trên. Bạn sử dụng giao thức Codable (hay còn gọi là giao diện) để đi từ đối tượng dữ liệu JSON sang một lớp hoặc cấu trúc Swift thực tế và bạn tạo thuộc tính cho dữ liệu bạn muốn lưu trữ (giá trị trong trường hợp của chúng tôi).

JSONDecoder giúp chúng ta phân tích cú pháp chuỗi JSON bằng cách sử dụng đối tượng Codable. Điều này hoạt động bất kể nền tảng nào vì trang tải khi khởi chạy ứng dụng có cùng tên ContentView bất kể nền tảng.

Đoạn ứng dụng

App Clips là cách mới nhất của Apple để sử dụng chức năng ứng dụng gốc bằng cách sử dụng "App Clip Code" mà không cần phải tải xuống toàn bộ ứng dụng từ App Store.

App Clips hoạt động tương tự như ứng dụng iOS - điểm khác biệt duy nhất là bạn không tạo dự án App Clip mới. Bạn chỉ cần thêm Clip ứng dụng làm mục tiêu cho ứng dụng iOS hiện có bằng cách đi tới Tệp-> Mới-> Mục tiêu-> iOS-> Clip ứng dụng khi một ứng dụng iOS hiện có đang mở trong Xcode.

Nếu bạn thắc mắc về các Widget iPhone / iPad, chúng không hoạt hình. Vì vậy, các lần nhấp vào nút sẽ chỉ mở ứng dụng tương ứng và không thể cập nhật văn bản thông qua API bên ngoài một cách độc lập.

Kết luận

Trong bài viết này, bạn đã học cách thực hiện lệnh gọi API RESTful GET từ SwiftUI theo cách đơn giản nhất có thể!

Vui lòng liên hệ với tôi nếu bạn có bất kỳ câu hỏi nào. Tôi đã tìm ra điều này bằng cách sử dụng một bài báo khác và tôi nghĩ đến việc đơn giản hóa nó hơn nữa. Vì vậy, để biết thêm chi tiết và cách làm cho mã này phức tạp hơn, hãy xem bài viết đó: