SwiftUI-通过API接口获取数据并填充到列表

1.创建Response.swift类，定义接收字段Struck，由于字段比较多，只取了几个比较有代表性的字段，代码如下：

import SwiftUI

struct Response: Codable {
    //结果集合
    var results: [Result]
}

struct Result: Codable {
    //曲目编号
    var trackId: Int
    //曲目名称
    var trackName: String
    //收藏名称
    var collectionName: String
}

2.列表展示页面

import SwiftUI

struct ContentView: View {

    @State var results = [Result]()
    
    var body: some View {
        List(results, id: \.trackId) { item in
            VStack(alignment: .leading) {
                Text(item.trackName)
                    .font(.headline)
                Text(item.collectionName)
            }
        }
        .onAppear(perform: loadData)
    }
    
    func loadData() {
        //请求url
        guard let url = URL(string: "https://itunes.apple.com/search?term=taylor+swift&entity=song") else {
            print("Invalid URL")
            return
        }
        let request = URLRequest(url: url)
        URLSession.shared.dataTask(with: request) { data, response, error in
            if let data = data {
                if let decodedResponse = try? JSONDecoder().decode(Response.self, from: data) {
                    //得到数据，回到主线程
                    DispatchQueue.main.async {
                        //更新界面
                        self.results = decodedResponse.results
                    }
                    //完成
                    return
                }
            }

            //报错输出
            print("错误信息: \(error?.localizedDescription ?? "未知错误")")
        }.resume()
    }
}

#if DEBUG
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
#endif

注意：
预览时需要点击Live Preview才能看到预览效果。

展示效果如下：

截屏2019-12-0617.31.59.png