Handling Network Requests with SwiftUI and URLSession

SwiftUI provides a declarative way to build user interfaces on Apple platforms. While SwiftUI excels at UI development, handling network requests requires integrating it with URLSession, Apple’s framework for performing network operations. Combining SwiftUI with URLSession allows developers to efficiently fetch data from remote servers and display it in their apps. This post will guide you through the process of making network requests using URLSession within a SwiftUI application.

What is URLSession?

URLSession is a powerful framework in Swift that allows you to perform various network-related tasks, such as fetching data, uploading and downloading files, and interacting with web services. It provides a flexible and configurable API for handling HTTP and other network protocols.

Why Use URLSession with SwiftUI?

• Data Fetching: Retrieve data from APIs to populate your UI.
• Asynchronous Operations: Perform network requests in the background to prevent UI blocking.
• Integration: Combine network data with SwiftUI’s declarative UI for seamless updates.

How to Perform Network Requests with SwiftUI and URLSession

Step 1: Create a Data Model

First, define a data model that matches the structure of the JSON response you expect from the server.

import Foundation

struct Post: Codable, Identifiable {
    let id: Int
    let userId: Int
    let title: String
    let body: String
}

Ensure your data model conforms to Codable for easy serialization and deserialization and Identifiable for use in SwiftUI lists.

Step 2: Implement the Network Request Function

Create a function that uses URLSession to fetch data from the API and decode it into your data model.

import Foundation

func fetchPosts(completion: @escaping ([Post]) -> Void) {
    guard let url = URL(string: "https://jsonplaceholder.typicode.com/posts") else {
        print("Invalid URL")
        return
    }

    URLSession.shared.dataTask(with: url) { data, response, error in
        if let error = error {
            print("Error fetching data: \(error.localizedDescription)")
            return
        }

        guard let data = data else {
            print("No data received")
            return
        }

        do {
            let decoder = JSONDecoder()
            let posts = try decoder.decode([Post].self, from: data)
            DispatchQueue.main.async {
                completion(posts)
            }
        } catch {
            print("Error decoding JSON: \(error.localizedDescription)")
        }
    }.resume()
}

Explanation:

• Creates a URL from the given string.
• Uses URLSession.shared.dataTask to create a data task for the URL.
• Handles errors during the network request.
• Decodes the JSON data into an array of Post objects.
• Dispatches the result to the main thread using DispatchQueue.main.async to update the UI safely.
• Calls resume() to start the data task.

Step 3: Integrate with SwiftUI

Use the network request function within your SwiftUI view to fetch and display the data. Use @State or @ObservedObject to manage the data and trigger UI updates.

import SwiftUI

struct ContentView: View {
    @State private var posts: [Post] = []

    var body: some View {
        NavigationView {
            List(posts) { post in
                VStack(alignment: .leading) {
                    Text(post.title)
                        .font(.headline)
                    Text(post.body)
                        .font(.subheadline)
                }
            }
            .navigationTitle("Posts")
        }
        .onAppear {
            fetchPosts { fetchedPosts in
                self.posts = fetchedPosts
            }
        }
    }
}

Explanation:

• Declares a state variable posts to store the fetched data.
• Uses a List to display the posts.
• Fetches the data when the view appears using .onAppear.
• Updates the posts state variable with the fetched data, triggering a UI update.

Step 4: Handling Errors

Implement proper error handling to gracefully handle network failures or data parsing issues. Update the UI to inform the user about any errors.

import SwiftUI

struct ContentView: View {
    @State private var posts: [Post] = []
    @State private var errorMessage: String?
    @State private var isLoading: Bool = false

    var body: some View {
        NavigationView {
            if isLoading {
                ProgressView("Loading...")
            } else if let errorMessage = errorMessage {
                Text("Error: \(errorMessage)")
                    .foregroundColor(.red)
            } else {
                List(posts) { post in
                    VStack(alignment: .leading) {
                        Text(post.title)
                            .font(.headline)
                        Text(post.body)
                            .font(.subheadline)
                    }
                }
                .navigationTitle("Posts")
            }
        }
        .onAppear {
            isLoading = true
            fetchPosts { fetchedPosts in
                isLoading = false
                if let fetchedPosts = fetchedPosts {
                    self.posts = fetchedPosts
                } else {
                    self.errorMessage = "Failed to fetch posts."
                }
            }
        }
    }

    func fetchPosts(completion: @escaping ([Post]?) -> Void) {
        guard let url = URL(string: "https://jsonplaceholder.typicode.com/posts") else {
            print("Invalid URL")
            completion(nil)
            return
        }

        URLSession.shared.dataTask(with: url) { data, response, error in
            if let error = error {
                print("Error fetching data: \(error.localizedDescription)")
                DispatchQueue.main.async {
                    completion(nil)
                }
                return
            }

            guard let data = data else {
                print("No data received")
                DispatchQueue.main.async {
                    completion(nil)
                }
                return
            }

            do {
                let decoder = JSONDecoder()
                let posts = try decoder.decode([Post].self, from: data)
                DispatchQueue.main.async {
                    completion(posts)
                }
            } catch {
                print("Error decoding JSON: \(error.localizedDescription)")
                DispatchQueue.main.async {
                    completion(nil)
                }
            }
        }.resume()
    }
}

Step 5: Using async/await (Swift 5.5 and later)

For modern Swift development, consider using async/await for cleaner, more readable code.

import SwiftUI

struct ContentView: View {
    @State private var posts: [Post] = []
    @State private var errorMessage: String?
    @State private var isLoading: Bool = false

    var body: some View {
        NavigationView {
            if isLoading {
                ProgressView("Loading...")
            } else if let errorMessage = errorMessage {
                Text("Error: \(errorMessage)")
                    .foregroundColor(.red)
            } else {
                List(posts) { post in
                    VStack(alignment: .leading) {
                        Text(post.title)
                            .font(.headline)
                        Text(post.body)
                            .font(.subheadline)
                    }
                }
                .navigationTitle("Posts")
            }
        }
        .task { // Use .task for async operations
            await fetchPosts()
        }
    }

    func fetchPosts() async {
        isLoading = true
        defer { isLoading = false } // Ensure isLoading is always set back

        guard let url = URL(string: "https://jsonplaceholder.typicode.com/posts") else {
            errorMessage = "Invalid URL"
            return
        }

        do {
            let (data, _) = try await URLSession.shared.data(from: url)
            let decoder = JSONDecoder()
            let decodedPosts = try decoder.decode([Post].self, from: data)
            
            await MainActor.run {
                posts = decodedPosts
            }
        } catch {
            await MainActor.run {
                errorMessage = error.localizedDescription
            }
            print("Error fetching or decoding: \(error)")
        }
    }
}

Key improvements with async/await:

• Simplified Asynchronous Handling: Removes the need for completion handlers.
• Clearer Error Handling: Uses try/catch for handling errors.
• Concurrency: The .task modifier makes the call asynchronous.
• MainActor.run: Updates to the UI are done using MainActor.run to ensure they occur on the main thread.

Conclusion

Combining SwiftUI with URLSession provides a robust and efficient way to handle network requests in your iOS applications. By following the steps outlined in this post, you can fetch data from APIs, display it in your SwiftUI views, and handle errors gracefully. Using async/await enhances the readability and maintainability of your asynchronous code, making your SwiftUI applications more responsive and user-friendly. Proper handling of network requests is crucial for creating data-driven and dynamic iOS applications.