如何刷新指向同一URL的AsyncImage组件？

当图片URL固定但内容定期更新时，AsyncImage默认的缓存机制会阻碍刷新，以下是几个实用的解决方案：

方案1：给URL追加随机查询参数 #

AsyncImage靠URL的哈希值判断是否需要重新加载，给URL加个不影响服务器返回的随机参数（比如递增数、时间戳），就能让它触发重新请求。

struct RefreshableImageView: View {
    let baseURL = URL(string: "https://example.com/your-image.jpg")!
    @State private var refreshToken = 0
    
    var body: some View {
        AsyncImage(url: URL(string: baseURL.absoluteString + "?refresh=\(refreshToken)")) { phase in
            switch phase {
            case .empty: ProgressView()
            case .success(let image): image.resizable().scaledToFit()
            case .failure: Image(systemName: "photo.badge.exclamationmark")
            @unknown default: EmptyView()
            }
        }
        .toolbar {
            Button(action: { refreshToken += 1 }) {
                Image(systemName: "arrow.clockwise")
            }
        }
    }
}

点击按钮时refreshToken递增，URL带上新参数，AsyncImage就会加载最新图片。注意要确保服务器会忽略这个额外参数，大部分静态资源服务器都支持这点。

方案2：自定义图片加载逻辑，绕过默认缓存 #

如果不想修改URL，直接用URLSession手动发起请求，强制禁用缓存，完全控制加载流程：

struct CustomRefreshableImageView: View {
    let imageURL = URL(string: "https://example.com/your-image.jpg")!
    @State private var image: UIImage?
    @State private var isLoading = false
    
    var body: some View {
        Group {
            if let image = image {
                Image(uiImage: image)
                    .resizable()
                    .scaledToFit()
            } else if isLoading {
                ProgressView()
            } else {
                Image(systemName: "photo.badge.exclamationmark")
            }
        }
        .onAppear(perform: loadImage)
        .toolbar {
            Button(action: loadImage) {
                Image(systemName: "arrow.clockwise")
            }
        }
    }
    
    private func loadImage() {
        isLoading = true
        var request = URLRequest(url: imageURL)
        // 强制忽略所有缓存，请求最新内容
        request.cachePolicy = .reloadIgnoringLocalAndRemoteCacheData
        
        URLSession.shared.dataTask(with: request) { data, _, error in
            DispatchQueue.main.async {
                isLoading = false
                if let data = data, let uiImage = UIImage(data: data) {
                    image = uiImage
                }
            }
        }.resume()
    }
}

每次点击按钮调用loadImage，都会重新请求最新图片，不受AsyncImage缓存影响。

方案3：利用Transaction参数触发刷新 #

AsyncImage的初始化支持transaction参数，修改这个参数可以触发视图刷新，不用改动URL：

struct TransactionRefreshImageView: View {
    let imageURL = URL(string: "https://example.com/your-image.jpg")!
    @State private var refreshTransaction = Transaction(animation: .easeInOut)
    
    var body: some View {
        AsyncImage(url: imageURL, transaction: refreshTransaction) { phase in
            switch phase {
            case .empty: ProgressView()
            case .success(let image): image.resizable().scaledToFit()
            case .failure: Image(systemName: "photo.badge.exclamationmark")
            @unknown default: EmptyView()
            }
        }
        .toolbar {
            Button(action: {
                // 生成新的Transaction对象，触发刷新
                refreshTransaction = Transaction(animation: .easeInOut(duration: Double.random(in: 0.3...0.5)))
            }) {
                Image(systemName: "arrow.clockwise")
            }
        }
    }
}

点击按钮时生成新的Transaction（只要和之前的对象不同即可，这里用随机动画时长），AsyncImage就会重新加载图片。

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