实现一个可重用的异步图片加载组件

题目

实现一个可重用的异步图片加载组件

信息

• 类型：问答
• 难度：⭐⭐

考点

异步加载, 状态管理, 缓存机制, 错误处理, 视图复用

快速回答

实现一个可重用的网络图片加载组件需要：

• 使用AsyncImage或自定义ObservableObject管理加载状态
• 处理加载中/成功/失败三种状态
• 添加内存缓存优化性能
• 支持占位符和错误视图
• 提供图片处理选项（如缩放）

核心需求

在SwiftUI中实现可复用的图片加载组件，需要解决网络请求、状态管理、缓存和错误处理等关键问题。

实现方案

1. 基础实现（使用AsyncImage）

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()
            case .failure:
                Image(systemName: "photo")
            @unknown default:
                EmptyView()
            }
        }
    }
}

2. 高级实现（自定义加载器）

class ImageLoader: ObservableObject {
    @Published var image: UIImage?
    private var cache = NSCache<NSURL, UIImage>()

    func load(from url: URL) {
        // 检查缓存
        if let cached = cache.object(forKey: url as NSURL) {
            image = cached
            return
        }

        URLSession.shared.dataTask(with: url) { data, _, error in
            guard let data = data, error == nil,
                  let loadedImage = UIImage(data: data) 
            else { return }

            // 缓存并更新UI
            DispatchQueue.main.async {
                self.cache.setObject(loadedImage, forKey: url as NSURL)
                self.image = loadedImage
            }
        }.resume()
    }
}

struct CustomNetworkImage: View {
    @StateObject private var loader = ImageLoader()
    let url: URL?

    var body: some View {
        Group {
            if let image = loader.image {
                Image(uiImage: image)
                    .resizable()
            } else if url != nil {
                ProgressView()
            } else {
                Image(systemName: "xmark.octagon")
            }
        }
        .onAppear { if let url = url { loader.load(from: url) } }
    }
}

最佳实践

• 缓存策略：使用NSCache实现内存缓存，避免重复请求
• 生命周期管理：用@StateObject管理加载器生命周期
• 错误处理：提供默认错误视图并记录错误日志
• 扩展性：通过参数支持占位符定制和图片处理：

  placeholder: () -> AnyView = { ProgressView().eraseToAnyView() }

常见错误

• 未处理URL为nil的情况导致崩溃
• 忘记主线程更新UI（DispatchQueue.main）
• 缓存未设置合理的成本限制（countLimit/totalCostLimit）
• 未取消未完成的网络请求（需实现onDisappear中的取消逻辑）

性能优化

• 添加磁盘缓存（使用URLCache）
• 实现请求取消机制：

  private var task: URLSessionTask?
  func cancel() { task?.cancel() }

• 支持图片解码优化：

  UIGraphicsImageRenderer(size: size).image { _ in
      image.draw(in: CGRect(origin: .zero, size: size))
  }

扩展知识

• 使用URLCache实现磁盘缓存（默认有4MB内存/20MB磁盘缓存）
• 结合Kingfisher或SDWebImageSwiftUI等第三方库
• 高级功能：渐进式加载、加载优先级、动图支持