async on Software Development Notes

How to cancel a background task in Swift

Eric Callanan — Sunday, 29 Jan 2023

The async/await syntax, introduced in Swift 5.5, allows a readable way to write asynchronous code. Asynchronous programming can improve performance of an app, but it is important to cancel unneeded tasks to ensure unwanted background tasks do not interfere with the app. This article demonstrates how to cancel a task explicitly and shows how the child tasks are automatically cancelled.

The code builds on the AsyncLetApp initiated in Use async let to run background tasks in parallel in Swift.

Why cancel a background tasks

Interaction with a view may trigger a background task to run and further interaction may make the initial request obsolete and trigger a subsequent background task to run. Aside from a waste of resources, not cancelling the initial task may result in intermittent and unexpected behaviour in your app.

A cancel button is added to the View with the action to call cancel in the ViewModel. Some logging is added to the ViewModel to print out when the file download is incremented and when the file isDownloading property is set to false. It can be seen that, after the download is cancelled, the task continues and eventually sets the isDownloading property to false. This can cause a problem in the UI if a download is cancelled and a subsequent download is started quickly. The isDownloading property from the first task is set to false with the effect of stopping the second download.

View

 1struct NaiveCancelView: View {
 2    @ObservedObject private var dataFiles: DataFileViewModel5
 3    @State var fileCount = 0
 4    
 5    init() {
 6        dataFiles = DataFileViewModel5()
 7    }
 8    
 9    var body: some View {
10        ScrollView {
11            VStack {
12                TitleView(title: ["Naive Cancel"])
13                
14                HStack {
15                    Button("Download All") {
16                        Task {
17                            let num = await dataFiles.downloadFile()
18                            fileCount += num
19                        }
20                    }
21                    .buttonStyle(BlueButtonStyle())
22                .disabled(dataFiles.file.isDownloading)
23                    Button("Cancel") {
24                        dataFiles.cancel()
25                    }
26                    .buttonStyle(BlueButtonStyle())
27                    .disabled(!dataFiles.file.isDownloading)
28                }
29                
30                Text("Files Downloaded: \(fileCount)")
31                
32                HStack(spacing: 10) {
33                    Text("File 1:")
34                    ProgressView(value: dataFiles.file.progress)
35                        .frame(width: 180)
36                    Text("\((dataFiles.file.progress * 100), specifier: "%0.0F")%")
37                    
38                    ZStack {
39                        Color.clear
40                            .frame(width: 30, height: 30)
41                        if dataFiles.file.isDownloading {
42                            ProgressView()
43                                .progressViewStyle(CircularProgressViewStyle(tint: .blue))
44                        }
45                    }
46                }
47                .padding()
48
49                .onDisappear {
50                    dataFiles.cancel()
51                }
52                
53                Spacer().frame(height: 200)
54                
55                Button("Reset") {
56                    dataFiles.reset()
57                }
58                .buttonStyle(BlueButtonStyle())
59                
60                Spacer()
61            }
62            .padding()
63        }
64    }
65}

ViewModel

 1class DataFileViewModel5: ObservableObject {
 2    @Published private(set) var file: DataFile
 3    
 4    init() {
 5        self.file = DataFile(id: 1, fileSize: 10)
 6    }
 7    
 8    func downloadFile() async -> Int {
 9        await MainActor.run {
10            file.isDownloading = true
11        }
12        
13        for _ in 0..<file.fileSize {
14            await MainActor.run {
15                guard file.isDownloading else { return }
16                file.increment()
17                print("  --   Downloading file - \(file.progress * 100) %")
18            }
19            usleep(300000)
20        }
21        
22        await MainActor.run {
23            file.isDownloading = false
24            print(" ***** File : \(file.id) setting isDownloading to FALSE")
25        }
26        
27        return 1
28    }
29    
30    func cancel() {
31        file.isDownloading = false
32        self.file = DataFile(id: 1, fileSize: 10)
33    }
34        
35    func reset() {
36        self.file = DataFile(id: 1, fileSize: 10)
37    }
38}

The second download task is stopped by the completion of the first background task

The second download task is stopped by the completion of the first background task

Use Cancel Flag

There are a number of approaches to cancel work in a background task. One mechanism is to add a status flag to the object with the asynchronous task and to monitor this flag while the task is running. There are no changes to the View required, the cancel button still calls the Cancel function in the ViewModel.

The changes to the ViewModel include the addition of a cancelFlag boolean property, which has to be marked with MainActor as it needs to be updated on the main UI thread. The loop that is simulating a file download is updated from a for loop to a while loop dependent on two conditions:

the cancel flag is false
the file is downloading

This fixes the problem, but it seems excessive to have an extra flag for cancelling a download.

View

 1struct CancelFlagView: View {
 2    @ObservedObject private var dataFiles: DataFileViewModel6
 3    @State var fileCount = 0
 4
 5    init() {
 6        dataFiles = DataFileViewModel6()
 7    }
 8    
 9    var body: some View {
10        ScrollView {
11            VStack {
12                TitleView(title: ["Use Cancel Flag"])
13                
14                HStack {
15                    Button("Download All") {
16                        Task {
17                            let num = await dataFiles.downloadFile()
18                            fileCount += num
19                        }
20                    }
21                    .buttonStyle(BlueButtonStyle())
22                .disabled(dataFiles.file.isDownloading)
23                    Button("Cancel") {
24                        dataFiles.cancel()
25                    }
26                    .buttonStyle(BlueButtonStyle())
27                    .disabled(!dataFiles.file.isDownloading)
28                }
29                
30                Text("Files Downloaded: \(fileCount)")
31                
32                HStack(spacing: 10) {
33                    Text("File 1:")
34                    ProgressView(value: dataFiles.file.progress)
35                        .frame(width: 180)
36                    Text("\((dataFiles.file.progress * 100), specifier: "%0.0F")%")
37                    
38                    ZStack {
39                        Color.clear
40                            .frame(width: 30, height: 30)
41                        if dataFiles.file.isDownloading {
42                            ProgressView()
43                                .progressViewStyle(CircularProgressViewStyle(tint: .blue))
44                        }
45                    }
46                }
47                .padding()
48                
49                .onDisappear {
50                    dataFiles.cancel()
51                }
52
53                Spacer().frame(height: 200)
54                
55                Button("Reset") {
56                    dataFiles.reset()
57                }
58                .buttonStyle(BlueButtonStyle())
59                
60                Spacer()
61            }
62            .padding()
63        }
64    }
65}

ViewModel

 1class DataFileViewModel6: ObservableObject {
 2    @Published private(set) var file: DataFile
 3    
 4    @MainActor var cancelFlag = false
 5    
 6    init() {
 7        self.file = DataFile(id: 1, fileSize: 10)
 8    }
 9    
10    func downloadFile() async -> Int {
11        await MainActor.run {
12            file.isDownloading = true
13        }
14        
15        while await !cancelFlag, file.isDownloading {
16            await MainActor.run {
17                print("  --   Downloading file - \(file.progress * 100) %")
18                file.increment()
19            }
20            usleep(300000)
21        }
22        
23        await MainActor.run {
24            file.isDownloading = false
25            print(" ***** File : \(file.id) setting isDownloading to FALSE")
26        }
27        
28        return 1
29    }
30  
31    @MainActor
32    func cancel() {
33        self.cancelFlag = true
34        print(" ***** File : \(file.id) setting cancelFlag to TRUE")
35        self.reset()
36    }
37        
38    @MainActor
39    func reset() {
40        self.file = DataFile(id: 1, fileSize: 10)
41        self.cancelFlag = false
42    }
43}

Use of cancel flag in ViewModel to end the background loop

Use of cancel flag in ViewModel to end the background loop

Cancel the task instance - Task.checkCancellation()

A more elegant solution is to create a State property for the Task and assign the task to this property in the view for the Download button action. The Cancel button can then cancel this task. That sounds simple, right! Well, there's a little more to do because, as the documentation says:

Tasks include a shared mechanism for indicating cancellation, but not a shared implementation for how to handle cancellation.

This is because how a task is cancelled will vary depending on what the task is doing.

In this example, the downloadFile function in the ViewModel is changed to use checkCancellation within the loop of the download. This checks for cancellation and will throw an error if the task has been cancelled. When this error is thrown, the isDownloading flag can be set to false and optionally, the ViewModel can be reset.

In this case, the Cancel Flag and all the associated code can be removed completely from the ViewModel.

View

 1struct CancelTaskView: View {
 2    @ObservedObject private var dataFiles: DataFileViewModel7
 3    @State var fileCount = 0
 4    
 5    @State var fileDownloadTask: Task<Void, Error>?
 6    
 7    init() {
 8        dataFiles = DataFileViewModel7()
 9    }
10    
11    var body: some View {
12        ScrollView {
13            VStack {
14                TitleView(title: ["Cancel Task", "", "<checkCancellation()>"])
15                
16                HStack {
17                    Button("Download All") {
18                        fileDownloadTask = Task {
19                            let num = await dataFiles.downloadFile()
20                            fileCount += num
21                        }
22                    }
23                    .buttonStyle(BlueButtonStyle())
24                    .disabled(dataFiles.file.isDownloading)
25                    Button("Cancel") {
26                        fileDownloadTask?.cancel()
27                    }
28                    .buttonStyle(BlueButtonStyle())
29                    .disabled(!dataFiles.file.isDownloading)
30                }
31                
32                Text("Files Downloaded: \(fileCount)")
33                
34                HStack(spacing: 10) {
35                    Text("File 1:")
36                    ProgressView(value: dataFiles.file.progress)
37                        .frame(width: 180)
38                    Text("\((dataFiles.file.progress * 100), specifier: "%0.0F")%")
39                    
40                    ZStack {
41                        Color.clear
42                            .frame(width: 30, height: 30)
43                        if dataFiles.file.isDownloading {
44                            ProgressView()
45                                .progressViewStyle(CircularProgressViewStyle(tint: .blue))
46                        }
47                    }
48                }
49                .padding()
50                
51                .onDisappear {
52                    fileDownloadTask?.cancel()
53                    dataFiles.reset()
54                }
55                
56                Spacer().frame(height: 200)
57                
58                Button("Reset") {
59                    fileDownloadTask?.cancel()
60                    dataFiles.reset()
61                }
62                .buttonStyle(BlueButtonStyle())
63                
64                Spacer()
65            }
66            .padding()
67        }
68    }
69}

ViewModel

 1class DataFileViewModel7: ObservableObject {
 2    @Published private(set) var file: DataFile
 3    
 4    init() {
 5        self.file = DataFile(id: 1, fileSize: 10)
 6    }
 7    
 8    func downloadFile() async  -> Int {
 9        await MainActor.run {
10            file.isDownloading = true
11        }
12        
13        while file.isDownloading {
14            do {
15                try await MainActor.run {
16                    try Task.checkCancellation()
17                    
18                    print("  --   Downloading file - \(file.progress * 100) %")
19
20                    file.increment()
21                }
22                usleep(300000)
23            } catch {
24                print(" *************** Catch - The task has been cancelled")
25                // Set the isDownloading flag to false
26                await MainActor.run {
27                    file.isDownloading = false
28                    // reset()
29                }
30            }
31        }
32        
33        await MainActor.run {
34            file.isDownloading = false
35            print(" ***** File : \(file.id) setting isDownloading to FALSE")
36        }
37        
38        return 1
39    }
40        
41    @MainActor
42    func reset() {
43        self.file = DataFile(id: 1, fileSize: 10)
44    }
45}

Cancel a Task instance in SwiftUI

Cancel a Task instance in SwiftUI

Task cancellation propagates to child tasks - Task.isCancelled

An alternative to raising an exception with checkCancellation is to use isCancelled to see if a task has been cancelled or not.

This approach still uses a State property for the Task. This is assigned to the downloadFiles function in the download button and the task is cancelled with the cancel button in the view.

The difference is in the ViewModel where the while loop includes a check for !Task.isCancelled so that the download continues if it has not been cancelled. This approach can be used for the single file download or as the code below demonstrates for the multiple file download.

Note that the Task that is cancelled is the main downloadFiles, which has multiple async calls to download multiple files. When the main task is cancelled, the cancellation propagates to all of the child tasks automatically in Swift.

View

 1struct CancelTaskMultipleView: View {
 2    @ObservedObject private var dataFiles: DataFileViewModel8
 3    
 4    @State var fileDownloadTask: Task<Void, Error>?
 5    
 6    init() {
 7        dataFiles = DataFileViewModel8()
 8    }
 9    
10    var body: some View {
11        ScrollView {
12            VStack {
13                TitleView(title: ["Cancel Task", "", "<Task.isCancelled>"])
14                
15                HStack {
16                    Button("Download All") {
17                        fileDownloadTask = Task {
18                            await dataFiles.downloadFiles()
19                        }
20                    }
21                    .buttonStyle(BlueButtonStyle())
22                    .disabled(dataFiles.isDownloading)
23                    
24                    Button("Cancel") {
25                        fileDownloadTask?.cancel()
26                    }
27                    .buttonStyle(BlueButtonStyle())
28                    .disabled(!dataFiles.isDownloading)
29                }
30                
31                Text("Files Downloaded: \(dataFiles.fileCount)")
32                
33                ForEach(dataFiles.files) { file in
34                    HStack(spacing: 10) {
35                        Text("File \(file.id):")
36                        ProgressView(value: file.progress)
37                            .frame(width: 180)
38                        Text("\((file.progress * 100), specifier: "%0.0F")%")
39                        
40                        ZStack {
41                            Color.clear
42                                .frame(width: 30, height: 30)
43                            if file.isDownloading {
44                                ProgressView()
45                                    .progressViewStyle(CircularProgressViewStyle(tint: .blue))
46                            }
47                        }
48                    }
49                }
50                .padding()
51                
52                .onDisappear {
53                    fileDownloadTask?.cancel()
54                    dataFiles.reset()
55                }
56                
57                Spacer().frame(height: 150)
58                
59                Button("Reset") {
60                    fileDownloadTask?.cancel()
61                    dataFiles.reset()
62                }
63                .buttonStyle(BlueButtonStyle())
64                
65                Spacer()
66            }
67            .padding()
68        }
69    }
70}

ViewModel

 1class DataFileViewModel8: ObservableObject {
 2    @Published private(set) var files: [DataFile]
 3    @Published private(set) var fileCount = 0
 4    
 5    init() {
 6        files = [
 7            DataFile(id: 1, fileSize: 10),
 8            DataFile(id: 2, fileSize: 20),
 9            DataFile(id: 3, fileSize: 5)
10        ]
11    }
12    
13    var isDownloading : Bool {
14        files.filter { $0.isDownloading }.count > 0
15    }
16    
17    func downloadFiles() async {
18        async let num1 = await downloadFile(0)
19        async let num2 = await downloadFile(1)
20        async let num3 = await downloadFile(2)
21        let (result1, result2, result3) = await (num1, num2, num3)
22        await MainActor.run {
23            fileCount = result1 + result2 + result3
24        }
25    }
26    
27    private func downloadFile(_ index: Array<DataFile>.Index) async -> Int {
28        await MainActor.run {
29            files[index].isDownloading = true
30        }
31        
32        while files[index].isDownloading, !Task.isCancelled {
33            await MainActor.run {
34                print("  --   Downloading file \(files[index].id) - \(files[index].progress * 100) %")
35                files[index].increment()
36            }
37            usleep(300000)
38        }
39        
40        await MainActor.run {
41            files[index].isDownloading = false
42            print(" ***** File : \(files[index].id) setting isDownloading to FALSE")
43        }
44        return 1
45    }
46    
47    @MainActor
48    func reset() {
49        files = [
50            DataFile(id: 1, fileSize: 10),
51            DataFile(id: 2, fileSize: 20),
52            DataFile(id: 3, fileSize: 5)
53        ]
54    }
55}

Cancelling a task instance cancels child tasks in SwiftUI

Cancelling a task instance cancels child tasks in SwiftUI

Cancelling and resuming background tasks in SwiftUI

Cancelling and resuming background tasks in SwiftUI

Conclusion

In Asynchronous programming, it is important to stop any unneeded background tasks to save resources and avoid any unwanted side-effects from background tasks interfering with the App. The Swift Async framework provides a number of ways to indicate that a task has been cancelled, but it is up to the implementer of the code in the task to respond appropriately when the task has been cancelled. Once a task has been cancelled, it cannot be uncancelled. One way to check if a task has been cancelled is to use checkCancellation, which will throw an error. Another is to simply use isCancelled as aboolean flag to see if the task has been cancelled.

Source code for AsyncLetApp is available on GitHub.

Use async let to run background tasks in parallel in Swift

Eric Callanan — Sunday, 15 Jan 2023

The async/await syntax was introduced in Swift 5.5 with Meet async/await in Swift in WWDC 2021. It is a more readable way to write asynchronous code and is easier to understand than dispatch queues and callback functions. The async/await syntax is similar to those used in other programming languages like C# or JavaScript. Use of "async let" is used to run multiple background tasks in parallel and wait for their combined results.

Swift Asynchronous Programming is a method of writing code that allows certain tasks to run concurrently, rather than sequentially. This can improve performance of an app by allowing it to perform multiple tasks at the same time, but more importantly, it can be used to ensure the UI is responsive to user input while tasks are performed on background threads.

Long running activity blocks the UI

In a synchronous program, the code runs in a linear, top-to-bottom fashion. The program waits for the current line to complete before moving on to the next one. This can cause problems in a user interface (UI) context, because if a long-running task is executed synchronously, the program will block and the UI will become unresponsive until the task is completed.

The following code simulates a long running task such as downloading a file in a synchronous way with the result that thu UI becomes unresponsive until the task is complete. This demonstrates an unacceptable user experience as the starting point.

Model

 1struct DataFile : Identifiable, Equatable {
 2    var id: Int
 3    var fileSize: Int
 4    var downloadedSize = 0
 5    var isDownloading = false
 6    
 7    init(id: Int, fileSize: Int) {
 8        self.id = id
 9        self.fileSize = fileSize
10    }
11    
12    var progress: Double {
13        return Double(self.downloadedSize) / Double(self.fileSize)
14    }
15    
16    mutating func increment() {
17        if downloadedSize < fileSize {
18            downloadedSize += 1
19        }
20    }
21}

ViewModel

 1class DataFileViewModel: ObservableObject {
 2    @Published private(set) var file: DataFile
 3    
 4    init() {
 5        self.file = DataFile(id: 1, fileSize: 10)
 6    }
 7    
 8    func downloadFile() {
 9        file.isDownloading = true
10
11        for _ in 0..<file.fileSize {
12            file.increment()
13            usleep(300000)
14        }
15
16        file.isDownloading = false
17    }
18    
19    func reset() {
20        self.file = DataFile(id: 1, fileSize: 10)
21    }
22}

View

 1struct TestView1: View {
 2    @ObservedObject private var dataFiles: DataFileViewModel
 3    
 4    init() {
 5        dataFiles = DataFileViewModel()
 6    }
 7    
 8    var body: some View {
 9        VStack {
10            TitleView(title: ["Synchronous"])
11            
12            Button("Download All") {
13                dataFiles.downloadFile()
14            }
15            .buttonStyle(BlueButtonStyle())
16            .disabled(dataFiles.file.isDownloading)
17            
18            HStack(spacing: 10) {
19                Text("File 1:")
20                ProgressView(value: dataFiles.file.progress)
21                    .frame(width: 180)
22                Text("\((dataFiles.file.progress * 100), specifier: "%0.0F")%")
23
24                ZStack {
25                    Color.clear
26                        .frame(width: 30, height: 30)
27                    if dataFiles.file.isDownloading {
28                        ProgressView()
29                            .progressViewStyle(CircularProgressViewStyle(tint: .blue))
30                    }
31                }
32            }
33            .padding()
34            
35            Spacer().frame(height: 200)
36
37            Button("Reset") {
38                dataFiles.reset()
39            }
40            .buttonStyle(BlueButtonStyle())
41
42            Spacer()
43        }
44        .padding()
45    }
46}

Simulated downloading a file synchronously - no UI update

Simulated downloading a file synchronously - no UI update

Use async/await to perform task in background

The code in the ViewModel is changed tom make the downloadFile method asynchronous. Note that as the DataFile model is being observed by the view, any changes to the model need to be performed on the UI thread. This is done using MainActor queue by wrapping any model updates with MainActor.run.

The view is updated to wrap the asynchronous call to downloadFile in a Task. This runs the download in the background while the UI remains responsive and displays progress.

ViewModel

 1class DataFileViewModel2: ObservableObject {
 2    @Published private(set) var file: DataFile
 3    
 4    init() {
 5        self.file = DataFile(id: 1, fileSize: 10)
 6    }
 7    
 8    func downloadFile() async -> Int {
 9        await MainActor.run {
10            file.isDownloading = true
11        }
12        
13        for _ in 0..<file.fileSize {
14            await MainActor.run {
15                file.increment()
16            }
17            usleep(300000)
18        }
19        
20        await MainActor.run {
21            file.isDownloading = false
22        }
23        
24        return 1
25    }
26    
27    func reset() {
28        self.file = DataFile(id: 1, fileSize: 10)
29    }
30}

View

 1struct TestView2: View {
 2    @ObservedObject private var dataFiles: DataFileViewModel2
 3    @State var fileCount = 0
 4    
 5    init() {
 6        dataFiles = DataFileViewModel2()
 7    }
 8    
 9    var body: some View {
10        VStack {
11            TitleView(title: ["Asynchronous"])
12            
13            Button("Download All") {
14                Task {
15                    let num = await dataFiles.downloadFile()
16                    fileCount += num
17                }
18            }
19            .buttonStyle(BlueButtonStyle())
20            .disabled(dataFiles.file.isDownloading)
21            
22            Text("Files Downloaded: \(fileCount)")
23            
24            HStack(spacing: 10) {
25                Text("File 1:")
26                ProgressView(value: dataFiles.file.progress)
27                    .frame(width: 180)
28                Text("\((dataFiles.file.progress * 100), specifier: "%0.0F")%")
29                
30                ZStack {
31                    Color.clear
32                        .frame(width: 30, height: 30)
33                    if dataFiles.file.isDownloading {
34                        ProgressView()
35                            .progressViewStyle(CircularProgressViewStyle(tint: .blue))
36                    }
37                }
38            }
39            .padding()
40            
41            Spacer().frame(height: 200)
42            
43            Button("Reset") {
44                dataFiles.reset()
45            }
46            .buttonStyle(BlueButtonStyle())
47            
48            Spacer()
49        }
50        .padding()
51    }
52}

Use async await to simulate downloading a file while UI is updated

Use async await to simulate downloading a file while UI is updated

Performing multiple tasks in the background

Now that we have one file downloading in the background and the UI displaying progress, let's change it to multiple files. The ViewModel is changed to hold an array of DataFiles rather than a single one. A downloadFiles method is added to loop through all the files and download each one.

The view is updated to bind to the array of DataFiles and display the download progress for each one. The Download button is bound to the async downloadFiles inside a Task.

ViewModel

 1class DataFileViewModel3: ObservableObject {
 2    @Published private(set) var files: [DataFile]
 3    @Published private(set) var fileCount = 0
 4    
 5    init() {
 6        files = [
 7            DataFile(id: 1, fileSize: 10),
 8            DataFile(id: 2, fileSize: 20),
 9            DataFile(id: 3, fileSize: 5)
10        ]
11    }
12    
13    var isDownloading : Bool {
14        files.filter { $0.isDownloading }.count > 0
15    }
16    
17    func downloadFiles() async {
18        for index in files.indices {
19            let num = await downloadFile(index)
20            await MainActor.run {
21                fileCount += num
22            }
23        }
24    }
25    
26    private func downloadFile(_ index: Array<DataFile>.Index) async -> Int {
27        await MainActor.run {
28            files[index].isDownloading = true
29        }
30        
31        for _ in 0..<files[index].fileSize {
32            await MainActor.run {
33                files[index].increment()
34            }
35            usleep(300000)
36        }
37        await MainActor.run {
38            files[index].isDownloading = false
39        }
40        return 1
41    }
42    
43    func reset() {
44        files = [
45            DataFile(id: 1, fileSize: 10),
46            DataFile(id: 2, fileSize: 20),
47            DataFile(id: 3, fileSize: 5)
48        ]
49    }
50}

View

 1struct TestView3: View {
 2    @ObservedObject private var dataFiles: DataFileViewModel3
 3    
 4    init() {
 5        dataFiles = DataFileViewModel3()
 6    }
 7    
 8    var body: some View {
 9        VStack {
10            TitleView(title: ["Asynchronous", "(multiple Files)"])
11            
12            Button("Download All") {
13                Task {
14                    await dataFiles.downloadFiles()
15                }
16            }
17            .buttonStyle(BlueButtonStyle())
18            .disabled(dataFiles.isDownloading)
19            
20            Text("Files Downloaded: \(dataFiles.fileCount)")
21            
22            ForEach(dataFiles.files) { file in
23                HStack(spacing: 10) {
24                    Text("File \(file.id):")
25                    ProgressView(value: file.progress)
26                        .frame(width: 180)
27                    Text("\((file.progress * 100), specifier: "%0.0F")%")
28                    
29                    ZStack {
30                        Color.clear
31                            .frame(width: 30, height: 30)
32                        if file.isDownloading {
33                            ProgressView()
34                                .progressViewStyle(CircularProgressViewStyle(tint: .blue))
35                        }
36                    }
37                }
38            }
39            .padding()
40            
41            Spacer().frame(height: 150)
42            
43            Button("Reset") {
44                dataFiles.reset()
45            }
46            .buttonStyle(BlueButtonStyle())
47            
48            Spacer()
49        }
50        .padding()
51    }
52}

Use async await to simulate downloading multiple files sequentially

Use async await to simulate downloading multiple files sequentially

Use "async let" to simulate downloading multiple files in parallel

The code above can be improved to perform the multiple downloads in parallel as each task is independent of the other tasks. In Swift concurrency this is achieved using async let, which sets a variable immediately with a promise, allowing the code to execute the next line of code. The code then awaits these promises for the final result to be complete.

async/await

1    func downloadFiles() async {
2        for index in files.indices {
3            let num = await downloadFile(index)
4            await MainActor.run {
5                fileCount += num
6            }
7        }
8    }

async let

 1    func downloadFiles() async {
 2        async let num1 = await downloadFile(0)
 3        async let num2 = await downloadFile(1)
 4        async let num3 = await downloadFile(2)
 5        
 6        let (result1, result2, result3) = await (num1, num2, num3)
 7        await MainActor.run {
 8            fileCount = result1 + result2 + result3
 9        }
10    }

ViewModel

 1class DataFileViewModel4: ObservableObject {
 2    @Published private(set) var files: [DataFile]
 3    @Published private(set) var fileCount = 0
 4    
 5    init() {
 6        files = [
 7            DataFile(id: 1, fileSize: 10),
 8            DataFile(id: 2, fileSize: 20),
 9            DataFile(id: 3, fileSize: 5)
10        ]
11    }
12    
13    var isDownloading : Bool {
14        files.filter { $0.isDownloading }.count > 0
15    }
16    
17    func downloadFiles() async {
18        async let num1 = await downloadFile(0)
19        async let num2 = await downloadFile(1)
20        async let num3 = await downloadFile(2)
21        
22        let (result1, result2, result3) = await (num1, num2, num3)
23        await MainActor.run {
24            fileCount = result1 + result2 + result3
25        }
26    }
27    
28    private func downloadFile(_ index: Array<DataFile>.Index) async -> Int {
29        await MainActor.run {
30            files[index].isDownloading = true
31        }
32        
33        for _ in 0..<files[index].fileSize {
34            await MainActor.run {
35                files[index].increment()
36            }
37            usleep(300000)
38        }
39        await MainActor.run {
40            files[index].isDownloading = false
41        }
42        return 1
43    }
44    
45    
46    func reset() {
47        files = [
48            DataFile(id: 1, fileSize: 10),
49            DataFile(id: 2, fileSize: 20),
50            DataFile(id: 3, fileSize: 5)
51        ]
52    }
53}

View

 1struct TestView4: View {
 2    @ObservedObject private var dataFiles: DataFileViewModel4
 3    
 4    init() {
 5        dataFiles = DataFileViewModel4()
 6    }
 7    
 8    var body: some View {
 9        VStack {
10            TitleView(title: ["Parallel", "(multiple Files)"])
11            
12            Button("Download All") {
13                Task {
14                    await dataFiles.downloadFiles()
15                }
16            }
17            .buttonStyle(BlueButtonStyle())
18            .disabled(dataFiles.isDownloading)
19            
20            Text("Files Downloaded: \(dataFiles.fileCount)")
21            
22            ForEach(dataFiles.files) { file in
23                HStack(spacing: 10) {
24                    Text("File \(file.id):")
25                    ProgressView(value: file.progress)
26                        .frame(width: 180)
27                    Text("\((file.progress * 100), specifier: "%0.0F")%")
28                    
29                    ZStack {
30                        Color.clear
31                            .frame(width: 30, height: 30)
32                        if file.isDownloading {
33                            ProgressView()
34                                .progressViewStyle(CircularProgressViewStyle(tint: .blue))
35                        }
36                    }
37                }
38            }
39            .padding()
40            
41            Spacer().frame(height: 150)
42            
43            Button("Reset") {
44                dataFiles.reset()
45            }
46            .buttonStyle(BlueButtonStyle())
47            
48            Spacer()
49        }
50        .padding()
51    }
52}

Use async let to simulate downloading multiple files in parallel

Use "async let" to simulate downloading multiple files in parallel

Use async let to simulate downloading multiple files in parallel

Use "async let" to simulate downloading multiple files in parallel

Conclusion

It is important to perform long-running tasks in the background and keep the UI responsive. async/await provides a clean mechanism to perform asynchronous tasks. There are times when a method is calling multiple methods in the background and the default is to make these calls in sequence. async let returns immediately allowing the code to proceed to the next call and then all the returned objects can be awaited together. This allows multiple background tasks to be performed in parallel.

Source code for AsyncLetApp is available on GitHub.

Display loading screen when fetching data in Swift

Eric Callanan — Sunday, 20 Mar 2022

Last week, we retrieved weather data from Open Weather API to demonstrate how to parse JSON data. The weather data is retrieved asynchronously, which may result in a delay before the UI is updated. This article shows how to display a progress view while the data is being fetched, to provide feedback that something is happening.

Slow down fetching data

This article builds on Read JSON with codeable in Swift using a free account with Open Weather to call the API for the Current weather data. An API key, under tha account settings, is needed to run this code.

Unfortunately (or fortunately), the Open Weather API is really fast! So a delay of 2 seconds is added to the getCurrentWeather function to better see the effect on the UI when the retrieval of the data is not instantaneous. This demonstrates that nothing seems to happen when a city button is selected. Then after a couple of seconds the weather for the selected city is displayed.

 1    // Need to add your Open 
 2    static func getCurrentWeather(latitude: CLLocationDegrees,
 3                                  longitude: CLLocationDegrees) async throws -> WeatherRawData {
 4        // Set the API with the appId for OpenWeather
 5        guard let url = URL(string: "https://api.openweathermap.org/data/2.5/weather?lat=\(latitude)&lon=\(longitude)&units=metric&appid=\("xxx WEATHER API KEY xxx")") else {
 6            fatalError("Missing url")
 7        }
 8        
 9        // Call the API asynchronously and wait for the response
10        let urlRequest = URLRequest(url: url)
11        let (data, response) = try await URLSession.shared.data(for: urlRequest)
12        
13        // TODO: Remove artificial slow down
14        sleep(2)
15        
16        guard (response as? HTTPURLResponse)?.statusCode == 200 else {
17            fatalError("Error retrieving weather data")
18        }
19        
20        return FileLoader.loadJson(data)
21    }

Old data is displayed while fetching weather data

Old data is displayed while fetching weather data

Add loading property to the ViewModel

Add a private boolean variable to the Weather ViewModel to store the loading state. This can be set to false by default and needs to be marked as @Published so that whenever it is changed all views using it will be reloaded. A public readonly property of isLoading that is available to the view is also added. This property is set to true at the start of getting weather for a city and set to false when the weather data has been retrieved and the JSON parsed.

 1class WeatherViewModel: ObservableObject {
 2    @Published private var weatherModel: WeatherModel
 3    private var _city: String
 4    @Published private var _isLoading: Bool = false
 5    
 6    init() {
 7        guard let data = FileLoader.readLocalFile("weatherData")
 8            else {
 9                fatalError("Unable to locate file \"weatherData.json\" in main bundle.")
10        }
11        
12        let rawWeather = FileLoader.loadJson(data)
13        weatherModel = WeatherModel(data: rawWeather)
14        _city = "not set"
15    }
16    
17    var location: String {
18        get { weatherModel.locationName }
19    }
20    
21    var weatherMain: String {
22        get { weatherModel.weatherName }
23    }
24    
25    var description: String {
26        get { weatherModel.description }
27    }
28    
29    var temperature: Double {
30        get { weatherModel.temperature }
31    }
32    
33    var locationTime: String {
34        get {
35            let utcDateFormatter = DateFormatter()
36            utcDateFormatter.timeZone = TimeZone(abbreviation: "UTC")
37            utcDateFormatter.timeStyle = .medium
38            let now = Date().addingTimeInterval(weatherModel.timeOffUtc)
39            let dateString = utcDateFormatter.string(from: now)
40            return dateString
41        }
42    }
43    
44    var city: String {
45        get { return _city}
46    }
47    
48    var isLoading: Bool {
49        get { return _isLoading}
50    }
51    
52    @MainActor
53    func weatherForCity(_ c:City) async {
54        _isLoading = true
55        print("One = \(_isLoading)")
56        _city = c.rawValue
57        let (lat, lon) = coordinates(for: c)
58        
59        do {
60            let rawWeather = try await WeatherService.getCurrentWeather(latitude: lat, longitude: lon)
61            weatherModel = WeatherModel(data: rawWeather)
62            _isLoading = false
63            print("Two = \(_isLoading)")
64        }
65        catch {
66            print("Error fetching weather with '\(c.rawValue)' City:\n \(error)")
67        }
68    }
69
70    private func coordinates(for city: City) -> (Double, Double) {
71        switch city {
72        case .newyork:
73            return (40.749939623101724, -73.98584035140507)
74        case .london:
75            return  (51.48403374752388, -0.0059268752163408114)
76        case .paris:
77            return  (48.8619958275662, 2.294848578874564)
78        case .vancouver:
79            return  (49.2791749376975, -123.10359944424778)
80        case .capetown:
81            return  (-33.96475307519853, 18.417554193804826)
82        case .sydney:
83            return  (-33.85657055055687, 151.21537180010895)
84        }
85    }
86}

The View is updated to check for the isLoading property and a progress view is displayed if the value is true, otherwise the WeatherView is displayed.

 1struct WeatherView3: View {
 2    @ObservedObject var weatherVm: WeatherViewModel
 3    
 4    var body: some View {
 5        VStack {
 6            VStack {
 7                Text("Current weather in Cities")
 8                Button("New York") {
 9                    Task {
10                        await weatherVm.weatherForCity(_: .newyork)
11                    }
12                }
13                .buttonStyle(BlueButtonStyle())
14                Button("Cape Town") {
15                    Task {
16                        await weatherVm.weatherForCity(_: .capetown)
17                    }
18                }
19                .buttonStyle(BlueButtonStyle())
20            }
21            .frame(width: 300)
22            
23            if weatherVm.isLoading {
24                ProgressView()
25                    .progressViewStyle(CircularProgressViewStyle(tint: .blue))
26            } else {
27                WeatherView(weatherVm: weatherVm)
28            }
29            
30            Spacer()
31        }
32    }
33}

Display progress indicator when fetching weather data

Display progress indicator when fetching weather data

Move the Progress View

The ProgressView is displayed directly below the city buttons and seems too close to the buttons. It is better if the ProgressView is displayed where the weather is displayed, a simple Spacer is added above the ProgressView to address this.

 1    var body: some View {
 2        VStack {
 3            VStack {
 4                Text("Current weather in Cities")
 5                Button("New York") {
 6                    Task {
 7                        await weatherVm.weatherForCity(_: .newyork)
 8                    }
 9                }
10                .buttonStyle(BlueButtonStyle())
11                Button("Cape Town") {
12                    Task {
13                        await weatherVm.weatherForCity(_: .capetown)
14                    }
15                }
16                .buttonStyle(BlueButtonStyle())
17            }
18            .frame(width: 300)
19            
20            if weatherVm.isLoading {
21                Spacer().frame(height:100)
22                ProgressView()
23                    .progressViewStyle(CircularProgressViewStyle(tint: .blue))
24            } else {
25                WeatherView(weatherVm: weatherVm)
26            }
27            
28            Spacer()
29        }
30    }

Display progress indicator lower down the screen

Display progress indicator lower down the screen

Display ProgressView when fetching weather data

Display ProgressView when fetching weather data

Disable buttons when fetching weather data

It is also possible to continually keep tapping the city button and send multiple requests for the weather data without allowing time for the data to load. The same isLoading property can be used to disable the buttons while the data is being retrieved.

 1    var body: some View {
 2        VStack {
 3            VStack {
 4                Text("Current weather in Cities")
 5                Button("New York") {
 6                    Task {
 7                        await weatherVm.weatherForCity(_: .newyork)
 8                    }
 9                }
10                .buttonStyle(BlueButtonStyle())
11                .disabled(weatherVm.isLoading)
12
13                Button("Cape Town") {
14                    Task {
15                        await weatherVm.weatherForCity(_: .capetown)
16                    }
17                }
18                .buttonStyle(BlueButtonStyle())
19                .disabled(weatherVm.isLoading)
20            }
21            .frame(width: 300)
22            
23            if weatherVm.isLoading {
24                Spacer().frame(height:100)
25                ProgressView()
26                    .progressViewStyle(CircularProgressViewStyle(tint: .blue))
27            } else {
28                WeatherView(weatherVm: weatherVm)
29            }
30            
31            Spacer()
32        }
33    }

The style of the buttons is updated to set the color to gray when the button is disabled.

 1struct BlueButtonStyle: ButtonStyle {
 2    @Environment(\.isEnabled) var isEnabled
 3    
 4    func makeBody(configuration: Configuration) -> some View {
 5        configuration.label
 6            .foregroundColor(.white)
 7            .padding(5)
 8            .frame(maxWidth: .infinity)
 9            .background(isEnabled ? Color.blue : Color.gray)
10            .cornerRadius(5)
11            .shadow(color:.black, radius:3, x:3.0, y:3.0)
12            .scaleEffect(configuration.isPressed ? 0.95 : 1.0)
13    }
14}

Disable buttons when fetching weather data

Disable buttons when fetching weather data

Disable buttons when fetching weather data

Disable buttons when fetching weather data

Conclusion

It is great to be able to fetch data in the background and leave the app responsive, however, it is important to display something to the user. This is implemented using a property in the ViewModel. This loading property is set to true when the API is called and set to false when the data has been retrieved and loaded into the model. A progress view can be conditionally displayed on the UI bound to this loading property. Other UI elements, such as butttons can also have behavior bound to the same property. In this way the buttons can be disabled while the data is being fetched to help prevent multiple calls to the API.