How can I use async/await with SwiftUI in Swift 5.5?

Viewed 13637

I have been testing the async/await functionality previewed in the Swift 5.5 release, but I am unable to collect the results from an async function and display them using SwiftUI. Here is my code:

import SwiftUI

struct AsyncTestView: View {
    @State var text: String?

    // Async function
    func asyncGetText() async -> String {
        Thread.sleep(forTimeInterval: 10)
        return "My text"
    }
    
    // Stores the result of async function
    func fetchText() async {
        let text = await asyncGetText()
        DispatchQueue.main.async {
            self.text = text
        }
    }
    
    var body: some View {
        Text(text ?? "Loading")
            .onAppear(perform: fetchText)
    }
}

This results in the following error:

'async' call in a function that does not support concurrency
Add 'async' to function 'fetchText()' to make it asynchronous

Adding async to the fetchText() function then results in the following error on the .onAppear() function:

Invalid conversion from 'async' function of type '() async -> ()' to synchronous function type '() -> Void'

In this article, they use the @asyncHandler tag to annotate the fetchText function, however this results in the warning: '@asyncHandler' has been removed from the language'.

4 Answers

I'm the author of the article you referenced.

As discussed in Discover concurrency in SwiftUI, views can make use of the new .task { } and .refreshable { } modifiers to fetch data asynchronously.

So you now have the following options to call your async code:

func someSyncMethod() {
  doSomeSyncWork()
  Task {
    await methodThatIsAsync()
  }
}
List {
}
.task {
  await methodThatIsAsync()
}
List {
}
.refreshable {
  await methodThatIsAsync()
}

If you're using a separate view model, make sure to mark it as @MainActor to ensure property updates get executed on the main actor.

I updated the code for my article: https://github.com/peterfriese/Swift-Async-Await-Experiments

As per new informations in WWDC session Meet async/await in Swift WWDC21, at 23m:28s this is now done using:

Task {
   someState = await someAsyncFunction()
}

Screenshot from the session.

Image showing how to use an Async task on a sync context

Note that there are more ways to instantiate a task. This is the most basic. You can use Task.detached as well and both ways can get a priority argument. Check both the Task docs and the session Check Explore structured concurrency in Swift WWDC21 at around 23:05 (I recommend the whole session!) for more info.

I agree with @peter-friese's answer but will add for those reading this the change of syntax when bridging from sync to async:

The new syntax:

Task {
   someState = await someAsyncFunction()
}

Replaces this syntax:

async {
   someState = await someAsyncFunction()
}

... and the Task() initialiser can accept a priority parameter:

Task(priority: .userInitiated) {
   someState = await someAsyncFunction()
}
import SwiftUI

struct AsyncTestView: View {
    @State var text = "Loading"

    // Async function
    func asyncGetText() async -> String {
        try? await Task.sleep(nanoseconds: 3 * NSEC_PER_SEC)
        return "My text"
    }
    
    var body: some View {
        Text(text)
        .task {
             text = await asyncGetText()
        }
    }
}
Related