SwiftUI AsyncImage加载失败时如何实现重试机制？

原生SwiftUI的AsyncImage没有内置重试机制，遇到临时网络波动等问题时容易触发.failure分支。下面提供两种可行的解决思路：

一、自定义带重试逻辑的AsyncImage封装 #

通过手动管理请求触发时机，在失败后重试指定次数，直到成功或耗尽重试次数：

struct RetryableAsyncImage: View {
    let url: URL?
    let maxRetryCount: Int
    @State private var retryCount = 0
    @State private var currentUrl: URL?
    
    init(url: URL?, maxRetryCount: Int = 3) {
        self.url = url
        self.maxRetryCount = maxRetryCount
        self._currentUrl = State(initialValue: url)
    }
    
    var body: some View {
        AsyncImage(url: currentUrl) { phase in
            switch phase {
            case .empty:
                ProgressView()
                    .scaleEffect(x: 1.5, y: 1.5, anchor: .center)
                    .aspectRatio(contentMode: .fit)
                    .frame(maxWidth: 36)
            case .success(let image):
                image.resizable()
                     .aspectRatio(contentMode: .fit)
                     .frame(maxWidth: 36)
                     .cornerRadius(50)
            case .failure:
                if retryCount < maxRetryCount {
                    // 延迟1秒重试，避免短时间内重复请求
                    DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
                        retryCount += 1
                        currentUrl = url // 重置URL触发重新加载
                    }
                    ProgressView()
                        .scaleEffect(x: 1.5, y: 1.5, anchor: .center)
                        .aspectRatio(contentMode: .fit)
                        .frame(maxWidth: 36)
                } else {
                    // 重试次数耗尽，显示占位图
                    Image(systemName: "person.circle.fill")
                        .resizable()
                        .aspectRatio(contentMode: .fit).frame(height: 36)
                        .cornerRadius(50)
                        .foregroundColor(Color.gray)
                }
            @unknown default:
                Image(systemName: "person.circle.fill")
                    .resizable()
                    .aspectRatio(contentMode: .fit).frame(height: 36)
                    .cornerRadius(50)
                    .foregroundColor(Color.gray)
            }
        }
    }
}

使用方式 #

直接替换原有AsyncImage，指定最大重试次数：

RetryableAsyncImage(url: URL(string: profilImgUrl), maxRetryCount: 3)

二、使用第三方图片加载库 #

像Kingfisher这类成熟的图片加载库，内置了完善的重试、缓存、超时处理逻辑，能更好应对网络异常场景。示例用法：

import Kingfisher

KFImage(URL(string: profilImgUrl))
    .placeholder {
        ProgressView()
            .scaleEffect(x: 1.5, y: 1.5, anchor: .center)
            .aspectRatio(contentMode: .fit)
            .frame(maxWidth: 36)
    }
    .resizable()
    .aspectRatio(contentMode: .fit)
    .frame(maxWidth: 36)
    .cornerRadius(50)
    .fallback {
        Image(systemName: "person.circle.fill")
            .resizable()
            .aspectRatio(contentMode: .fit).frame(height: 36)
            .cornerRadius(50)
            .foregroundColor(Color.gray)
    }

这类库还支持自定义重试次数、缓存策略等配置，适合生产环境的复杂需求。

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