在 SwiftUI 中,我們想呼叫 API,回傳 JSON 資料,可以怎麼做呢?
此範例將可以持續點擊 Fetch Joke,來呼叫回傳隨機的某笑話。
提供笑話的 API: https://api.chucknorris.io/jokes/random
// 20220509000756
// https://api.chucknorris.io/jokes/random
{
"categories": [
],
"created_at": "2020-01-05 13:42:29.296379",
"icon_url": "https://assets.chucknorris.host/img/avatar/chuck-norris.png",
"id": "wBq7IOiXSwOuZScaevFxwg",
"updated_at": "2020-01-05 13:42:29.296379",
"url": "https://api.chucknorris.io/jokes/wBq7IOiXSwOuZScaevFxwg",
"value": "Chuck Norris didnt dial the wrong number......you just answered the wrong phone"
}
直接來看程式碼,就知道如何使用!
使用 URLSession 帶入 url 執行任務。
使用 JSONDecoder 來解析 JSON 資料,並以 Joke Class 封裝。
// Theme: Call RESTful API
// Language: SwiftUI
// IDE: Xcode 13.3.1
// OS: iOS 15
// Date: 2022-05-01
// Author: HappyMan
import SwiftUI
struct JokeView: View {
@State private var joke: String = ""
@State private var url: String = ""
@State private var imageUrl: String = ""
var body: some View {
Text(joke)
.padding()
Text(url)
.padding()
AsyncImage(url: URL(string: "https://secure.gravatar.com/avatar/9971a01c3246b3b12a0f8dacc012b378"))
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 ?? ""
url = decodedResponse?.url ?? ""
imageUrl = decodedResponse?.icon_url ?? ""
}
} label: {
Text("Fetch Joke")
}
}
}
struct JokeView_Previews: PreviewProvider {
static var previews: some View {
JokeView()
}
}
struct Joke: Codable {
let value: String
let url: String
let created_at: String
let updated_at: String
let id: String
let icon_url: String
}
其中 Task 是 Adds an asynchronous task to perform when this view appears.
因為變數是 @State,所以一設定值,就會刷新畫面。
參考:
隨意留個言吧:)~