SwiftUI WebView异步函数调用序列执行问题求助

问题背景 #

我有一个通过绑定值驱动的WebView，它会运行JavaScript完成计算并返回结果。现在需要实现这样的流程：

1. 先执行两个异步函数更新varA、varB
2. 触发WebView执行，获取其闭包返回的结果
3. 用该结果执行第三个异步函数
4. 上述序列需要重复多次

但由于视图绑定的特性，当前流程无法正常运行，asyncFunc3总是拿到空的result值。

现有代码 #

WebView实现 #

struct MyWebView: UIViewRepresentable {
    @Binding var varA: String
    @Binding var varB: String
    @Binding var isLoading: Bool
    var completion: (String) -> Void

    func makeUIView(context: Context) -> WKWebView {
        let webView = WKWebView()
        webView.navigationDelegate = context.coordinator
        return webView
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        if let url = URL(string: urlString), isLoading {
            let request = URLRequest(url: url)
            uiView.load(request)
        }
    }

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    class Coordinator: NSObject, WKNavigationDelegate {
        var parent: MyWebView

        init(_ parent: MyWebView) {
            self.parent = parent
        }

        func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
            webView.evaluateJavaScript("document.body.innerHTML") { result, error in 
                varA = // 从结果更新varA
                varB = // 从结果更新varB
                completion(result as? String ?? "")
            }
        }
    }
}

父视图中的WebView定义 #

struct ParentView: View {
    @State private var varA: String = ""
    @State private var varB: String = ""
    @State private var result: String = ""
    @State private var isLoading: Bool = false

    @ViewBuilder
    func myWebView() -> some View {
        MyWebView(varA: $varA, varB: $varB, isLoading: $isLoading) { returnedResult in
            result = returnedResult
        }
    }

    // ... 其他视图代码
}

按钮点击逻辑 #

Button("Click") {
    for _ in 0..<3 {
        Task {
            varA = await asyncFunc1()
            varB = await asyncFunc2()
            isLoading = true // 触发WebView执行
            
            await asyncFunc3(varA, varB, result) // 这里result总是空值
        }
    }
}

核心问题分析 #

• 异步任务顺序未同步：asyncFunc3在WebView返回结果前就被调用，此时result还没更新
• 多Task并发：循环里创建多个Task会导致所有序列同时执行，进一步打乱顺序
• 状态值传递不可靠：依赖@State的result传递结果，无法保证WebView完成后才触发后续逻辑

解决方案 #

1. 重构WebView，将回调转为异步可等待方法 #

用CheckedContinuation把WebView的回调逻辑包装成异步函数，让外部可以通过await等待执行结果：

struct MyWebView: UIViewRepresentable {
    @Binding var varA: String
    @Binding var varB: String
    @Binding var shouldTrigger: Bool
    private let taskManager = WebViewTaskManager()

    init(varA: Binding<String>, varB: Binding<String>) {
        self._varA = varA
        self._varB = varB
        self._shouldTrigger = .constant(false)
    }

    // 对外暴露的异步方法，等待WebView执行结果
    func getWebResult() async throws -> String {
        shouldTrigger = true
        return try await taskManager.getResult()
    }

    func makeUIView(context: Context) -> WKWebView {
        taskManager.webView.navigationDelegate = context.coordinator
        return taskManager.webView
    }

    func updateUIView(_ uiView: WKWebView, context: Context) {
        guard shouldTrigger, let url = URL(string: urlString) else { return }
        uiView.load(URLRequest(url: url))
        shouldTrigger = false // 重置触发标记
    }

    func makeCoordinator() -> Coordinator {
        Coordinator(self)
    }

    class Coordinator: NSObject, WKNavigationDelegate {
        var parent: MyWebView

        init(_ parent: MyWebView) {
            self.parent = parent
        }

        func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
            webView.evaluateJavaScript("document.body.innerHTML") { result, error in
                if let error = error {
                    self.parent.taskManager.finish(with: error)
                    return
                }
                guard let htmlStr = result as? String else {
                    self.parent.taskManager.finish(with: NSError(domain: "WebViewError", code: -1, userInfo: [NSLocalizedDescriptionKey: "无效结果"]))
                    return
                }
                // 更新绑定的varA、varB
                self.parent.varA = // 从htmlStr解析对应值
                self.parent.varB = // 从htmlStr解析对应值
                self.parent.taskManager.finish(with: htmlStr)
            }
        }
    }

    // 封装WebView的异步任务管理
    class WebViewTaskManager {
        let webView = WKWebView()
        private var continuation: CheckedContinuation<String, Error>?

        func getResult() async throws -> String {
            try await withCheckedThrowingContinuation { cont in
                self.continuation = cont
            }
        }

        func finish(with result: String) {
            continuation?.resume(returning: result)
            continuation = nil
        }

        func finish(with error: Error) {
            continuation?.resume(throwing: error)
            continuation = nil
        }
    }
}

2. 调整父视图逻辑，确保串行执行序列 #

把循环放在单个Task里，确保每次序列执行完成后再进行下一次，同时直接通过异步返回值获取WebView结果：

struct ParentView: View {
    @State private var varA: String = ""
    @State private var varB: String = ""
    @State private var webView = MyWebView(varA: $varA, varB: $varB)

    var body: some View {
        VStack {
            webView
            Button("执行序列") {
                Task {
                    // 串行执行3次任务序列
                    for _ in 0..<3 {
                        // 1. 执行前两个异步函数
                        varA = await asyncFunc1()
                        varB = await asyncFunc2()

                        // 2. 等待WebView返回结果
                        do {
                            let webResult = try await webView.getWebResult()
                            // 3. 执行第三个异步函数
                            await asyncFunc3(varA, varB, webResult)
                        } catch {
                            print("WebView执行失败：\(error.localizedDescription)")
                        }
                    }
                }
            }
        }
    }

    // 模拟业务异步函数
    func asyncFunc1() async -> String {
        await Task.sleep(1_000_000_000)
        return "A_\(UUID().uuidString)"
    }

    func asyncFunc2() async -> String {
        await Task.sleep(1_000_000_000)
        return "B_\(UUID().uuidString)"
    }

    func asyncFunc3(_ a: String, _ b: String, _ result: String) async {
        print("完成asyncFunc3：a=\(a), b=\(b), webResult=\(result)")
        await Task.sleep(500_000_000)
    }
}

关键优化点 #

• 异步化WebView结果：用CheckedContinuation将回调转为异步函数，保证可以等待WebView执行完成
• 串行执行循环任务：把循环放在单个Task内，避免多Task并发导致的顺序混乱
• 触发标记替代状态依赖：用shouldTrigger控制WebView加载，避免重复触发问题
• 直接传递结果：通过异步返回值获取WebView结果，不再依赖@State传递，保证值的时效性

内容的提问来源于stack exchange，提问作者r360