如何在watchOS上实现从字符串URL异步获取图片？

问题背景 #

现有一段SwiftUI代码用于从URL加载网络图片，在iOS WidgetKit中正常运行，但在watchOS环境下报错无法使用，控制台提示：

Synchronous URL loading of https://www.imageurl.here should not occur on this application's main thread as it may lead to UI unresponsiveness. Please switch to an asynchronous networking API such as URLSession.

原代码如下：

import SwiftUI
struct NetworkImage: View {
    let url: URL?
    var body: some View {
        if let url = url, let imageData = try? Data(contentsOf: url), let uiImage = UIImage(data: imageData) {
            Image(uiImage: uiImage)
        }
    }
}

此前找到的相关解决方案针对UIKit场景，无法适配watchOS的SwiftUI环境。

解决方案 #

方案1：使用官方AsyncImage（推荐） #

从watchOS 8、iOS 15开始，SwiftUI提供了AsyncImage组件，专门处理异步网络图片加载，完全适配watchOS和Widget场景，无需手动编写异步逻辑：

import SwiftUI

struct NetworkImage: View {
    let url: URL?
    
    var body: some View {
        AsyncImage(url: url) { phase in
            switch phase {
            case .empty:
                // 加载中显示进度视图
                ProgressView()
            case .success(let image):
                image
                    .resizable()
                    .scaledToFit()
            case .failure:
                // 加载失败显示占位图标
                Image(systemName: "photo")
                    .foregroundColor(.gray)
            @unknown default:
                EmptyView()
            }
        }
    }
}

方案2：自定义异步加载（兼容低版本） #

如果需要支持watchOS 8以下版本，可以通过ObservableObject管理加载状态，用URLSession实现异步请求：

import SwiftUI

class ImageLoader: ObservableObject {
    @Published var image: UIImage?
    private var task: URLSessionDataTask?
    
    func loadImage(from url: URL) {
        task?.cancel()
        task = URLSession.shared.dataTask(with: url) { [weak self] data, _, error in
            guard let data = data, error == nil, let image = UIImage(data: data) else {
                DispatchQueue.main.async {
                    self?.image = nil
                }
                return
            }
            DispatchQueue.main.async {
                self?.image = image
            }
        }
        task?.resume()
    }
    
    deinit {
        task?.cancel()
    }
}

struct NetworkImage: View {
    let url: URL?
    @StateObject private var loader = ImageLoader()
    
    var body: some View {
        Group {
            if let image = loader.image {
                Image(uiImage: image)
                    .resizable()
                    .scaledToFit()
            } else {
                ProgressView()
                    .onAppear {
                        if let url = url {
                            loader.loadImage(from: url)
                        }
                    }
            }
        }
    }
}

核心原因说明 #

原代码中的Data(contentsOf:)属于同步网络请求，会阻塞主线程，而watchOS对主线程响应速度要求严格，因此触发了警告并禁止该操作。上述两种方案均采用异步请求逻辑，避免主线程阻塞，同时适配watchOS的SwiftUI视图生命周期。

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