During WWDC 2019, Apple introduces Combine which provides a declarative Swift API for processing values over time.
These values can represent many kinds of asynchronous events. Combine declares publishers to expose values that can change over time, and subscribers to receive those values from the publishers.
Today, we will focus on how we can utilize combine's publishers and subscribers system to fetch remote data from a remote data source and populate the data to our UI.
We'll keep it simple and stupid!; I chose the Random Data API, and we'll be using their Users Endpoint which provides some mock information for a random user.
Step1: Create the data models for our API
We are going to need the RemoteUser and the Address models
struct RemoteUser: Identifiable, Codable {
let id: Int
let firstName, lastName: String
let username, email: String
let phoneNumber: String
let address: Address
enum CodingKeys: String, CodingKey {
case id
case firstName = "first_name"
case lastName = "last_name"
case username, email
case phoneNumber = "phone_number"
case address
}
}
struct Address: Codable {
let city: String
let state: String
let country: String
enum CodingKeys: String, CodingKey {
case city
case state, country
}
func formatted() -> String {
return "\(city), \(state), \(country)"
}
}
Step2: Introduce a fetch function
This function does the heavy lifting for us, taking an input of type URLRequest as a parameter and returning an output of type AnyPublisher<T, Error>
func perform<T: Decodable>(_ request: URLRequest) -> AnyPublisher<T, Error> {
return URLSession.shared
.dataTaskPublisher(for: request)
.map { $0.data }
.decode(type: T.self, decoder: JSONDecoder())
.receive(on: DispatchQueue.main)
.eraseToAnyPublisher()
}
Step3: Build our simple UI and Run
Basically, in our ContenView, we will use a simple List where we shall be showing our user information represented by a UserRowView
import Combine
struct ContentView: View {
@State private var users = [RemoteUser]()
@State private var isFetchingData = false
@State private var cancellables = Set<AnyCancellable>()
var body: some View {
NavigationView {
List {
ForEach(users) { user in
UserRowView(user)
}
if isFetchingData {
ProgressView()
.frame(maxWidth: .infinity)
}
}
.navigationTitle("\(users.count) Active Users")
.onAppear(perform: fetchSomeData)
}
}
private func getURLRequest() -> URLRequest {
var request = URLRequest(url: URL(string: "https://random-data-api.com/api/v2/users")!)
request.httpMethod = "GET"
return request
}
private func fetchSomeData() {
guard users.count < 50 else { return }
let result: AnyPublisher<RemoteUser, Error> = perform(getURLRequest())
isFetchingData = true
result.sink { _ in
} receiveValue: { item in
print(item)
self.users.append(item)
isFetchingData = false
fetchSomeData()
}
.store(in: &cancellables)
}
}
struct UserRowView: View {
private let user: RemoteUser
init(_ user: RemoteUser) {
self.user = user
}
var body: some View {
VStack(alignment: .leading, spacing: 10) {
Text("Name: \(user.firstName) \(user.lastName)")
.fontWeight(.bold)
Text("Username: \(Text("@\(user.username)").foregroundColor(.accentColor))")
.fontWeight(.semibold)
Text("Tél: \(user.phoneNumber)")
.fontWeight(.medium)
Text("Address: \(user.address.formatted())")
.italic()
.foregroundColor(.secondary)
}
.padding(8)
.frame(maxWidth: .infinity, alignment: .leading)
.cornerRadius(10)
}
}
You will observe that on every successful request, another request will be made until the number of users reaches 50 as specified in the code.
Conclusion
Combine framework has a lot to offer, but in this article, we have just scratched the tip of the iceberg, I hope you have learned something today :)
