Asynchronous Data Fetching in SwiftUI with Combine & Async/Await

 

Fetching data asynchronously is a crucial aspect of modern iOS applications. SwiftUI provides multiple approaches for handling asynchronous operations, including Combine and async/await (introduced in Swift 5.5). These techniques improve efficiency and responsiveness while keeping the code clean and maintainable.

In this guide, we’ll explore how to fetch data asynchronously in SwiftUI using both Combine and async/await, covering best practices and real-world use cases.

Using Combine for Data Fetching

Understanding Combine

Combine is Apple’s reactive programming framework that allows declarative handling of asynchronous operations through publishers and subscribers.

Fetching Data with Combine

Here’s how you can use Combine to fetch data from an API:

import SwiftUI
import Combine

struct Post: Codable, Identifiable {
    let id: Int
    let title: String
    let body: String
}
class PostViewModel: ObservableObject {
    @Published var posts: [Post] = []
    private var cancellables = Set<AnyCancellable>()
    
    func fetchPosts() {
        let url = URL(string: "https://jsonplaceholder.typicode.com/posts")!
        
        URLSession.shared.dataTaskPublisher(for: url)
            .map { $0.data }
            .decode(type: [Post].self, decoder: JSONDecoder())
            .receive(on: DispatchQueue.main)
            .sink(receiveCompletion: { completion in
                switch completion {
                case .failure(let error):
                    print("Error fetching posts: \(error.localizedDescription)")
                case .finished:
                    break
                }
            }, receiveValue: { [weak self] posts in
                self?.posts = posts
            })
            .store(in: &cancellables)
    }
}

Displaying Data in SwiftUI

struct ContentView: View {
    @StateObject private var viewModel = PostViewModel()
    
    var body: some View {
        NavigationView {
            List(viewModel.posts) { post in
                VStack(alignment: .leading) {
                    Text(post.title)
                        .font(.headline)
                    Text(post.body)
                        .font(.subheadline)
                        .foregroundColor(.gray)
                }
            }
            .navigationTitle("Posts")
            .onAppear {
                viewModel.fetchPosts()
            }
        }
    }
}

Using Async/Await for Data Fetching

Why Use Async/Await?

Async/await simplifies asynchronous code, making it more readable and reducing boilerplate code compared to Combine.

Fetching Data with Async/Await

import SwiftUI

@MainActor
class AsyncPostViewModel: ObservableObject {
    @Published var posts: [Post] = []
    
    func fetchPosts() async {
        guard let url = URL(string: "https://jsonplaceholder.typicode.com/posts") else { return }
        
        do {
            let (data, _) = try await URLSession.shared.data(from: url)
            let decodedPosts = try JSONDecoder().decode([Post].self, from: data)
            self.posts = decodedPosts
        } catch {
            print("Error fetching posts: \(error.localizedDescription)")
        }
    }
}

Displaying Data in SwiftUI with Async/Await

struct AsyncContentView: View {
    @StateObject private var viewModel = AsyncPostViewModel()
    
    var body: some View {
        NavigationView {
            List(viewModel.posts) { post in
                VStack(alignment: .leading) {
                    Text(post.title)
                        .font(.headline)
                    Text(post.body)
                        .font(.subheadline)
                        .foregroundColor(.gray)
                }
            }
            .navigationTitle("Posts")
            .task {
                await viewModel.fetchPosts()
            }
        }
    }
}

Choosing Between Combine and Async/Await

When to Use Combine?

• Best for handling multiple publishers and complex data streams.
• Useful when chaining operations (e.g., applying transformations to data streams).
• Allows for more declarative and functional programming paradigms.

When to Use Async/Await?

• Ideal for simple, one-time asynchronous operations like API calls.
• Provides a more straightforward and readable syntax.
• Works well with structured concurrency.

Key Differences

Code Complexity

• Combine: Requires publishers, subscribers, and cancellables.
• Async/Await: Uses simple async functions with await keyword.

Error Handling

• Combine: Uses .sink and .catch for error management.
• Async/Await: Uses standard do-catch blocks, making it more readable.

Performance

• Combine: Optimized for continuous data streams.
• Async/Await: Best for structured concurrency and one-time tasks.

Conclusion

Both Combine and Async/Await provide powerful ways to handle asynchronous data fetching in SwiftUI. Depending on your app’s needs, you can choose the best approach or even use both together.

🚀 Which method do you prefer? Let me know in the comments!