Swift Combine 级联多个 UI 更新，包括网络请求 从入门到精通十六

2024-02-15 14:44
文章标签 入门 精通 ui 请求 更新 网络 多个 swift 包括 十六 级联 combine

本文主要是介绍Swift Combine 级联多个 UI 更新，包括网络请求 从入门到精通十六，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Combine 系列

  1. Swift Combine 从入门到精通一
  2. Swift Combine 发布者订阅者操作者 从入门到精通二
  3. Swift Combine 管道 从入门到精通三
  4. Swift Combine 发布者publisher的生命周期 从入门到精通四
  5. Swift Combine 操作符operations和Subjects发布者的生命周期 从入门到精通五
  6. Swift Combine 订阅者Subscriber的生命周期 从入门到精通六
  7. Swift 使用 Combine 进行开发 从入门到精通七
  8. Swift 使用 Combine 管道和线程进行开发 从入门到精通八
  9. Swift Combine 使用 sink, assign 创建一个订阅者 从入门到精通九
  10. Swift Combine 使用 dataTaskPublisher 发起网络请求 从入门到精通十
  11. Swift Combine 用 Future 来封装异步请求 从入门到精通十一
  12. Swift Combine 有序的异步操作 从入门到精通十二
  13. Swift Combine 使用 flatMap 和 catch错误处理 从入门到精通十三
  14. Swift Combine 网络受限时从备用 URL 请求数据 从入门到精通十四
  15. Swift Combine 通过用户输入更新声明式 UI 从入门到精通十五
    在这里插入图片描述

1. 级联多个 UI 更新，包括网络请求

目的: 由上游的订阅者触发多个 UI 元素更新

以下提供的示例是扩展了 通过用户输入更新声明式 UI 例子中的发布者, 添加了额外的 Combine 管道，当有人与所提供的界面交互时以更新多个 UI 元素。

此视图的模式从接受用户输入的文本框开始，紧接着是一系列操作事件流：

  1. 使用一个 IBAction 来更新 @Published username 变量。
  2. 我们有一个订阅者（usernameSubscriber）连接到 $username 发布者，该发布者发送值的更新，并尝试取回 GitHub user。 结果返回的变量 githubUserData（也被 @Published 标记）是一个 GitHub 用户对象的列表。 尽管我们只期望在这里获得单个值，但我们使用列表是因为我们可以方便地在失败情况下返回空列表：无法访问 API 或用户名未在 GitHub 注册。
  3. 我们有 passthroughSubject networkActivityPublisher 来反映 GithubAPI 对象何时开始或完成网络请求。
  4. 我们有另一个订阅者 repositoryCountSubscriber 连接到 $githubUserData 发布者，该发布者从 github 用户数据对象中提取出仓库个数，并将其分配给要显示的文本字段。
  5. 我们有一个最终的订阅者 avatarViewSubscriber 连接到 $githubUserData，尝试取回与用户的头像相关的图像进行显示。

返回空列表很有用，因为当提供无效的用户名时，我们希望明确地移除以前显示的任何头像。 为此，我们需要管道始终有值可以流动，以便触发进一步的管道和相关的 UI 界面更新。 如果我们使用可选的 String? 而不是 String[] 数组，可选的字符串不会在值是 nil 时触发某些管道，并且我们始终希望管道返回一个结果值（即使是空值）。

以 assign 和 sink 创建的订阅者被存储在 ViewController 实例的 AnyCancellable 变量中。 由于它们是在类实例中定义的，Swift 编译器创建的 deinitializers 会在类被销毁时，取消并清理发布者。

许多喜欢 RxSwift 的开发者使用的是 “CancelBag” 对象来存储可取消的引用，并在销毁时取消管道。 可以在这儿看到一个这样的例子：https://github.com/tailec/CombineExamples/blob/master/CombineExamples/Shared/CancellableBag.swift. 这与 Combine 中在 AnyCancellable 类型上调用 store 函数是相似的，它允许你将订阅者的引用保存在一个集合中，例如 Set<AnyCancellable>。

管道使用 subscribe 操作符明确配置为在后台队列中工作。 如果没有该额外的配置，管道将被在主线程调用并执行，因为它们是从 UI 线程上调用的，这可能会导致用户界面响应速度明显减慢。 同样，当管道的结果分配给或更新 UI 元素时，receive 操作符用于将该工作转移回主线程。

为了让 UI 在 @Published 属性发送的更改事件中不断更新，我们希望确保任何配置的管道都具有 <Never> 的失败类型。 这是 assign 操作符所必需的。 当使用 sink 操作符时，它也是一个潜在的 bug 来源。 如果来自 @Published 变量的管道以一个接受 Error 失败类型的 sink 结束，如果发生错误，sink 将给管道发送终止信号。 这将停止管道的任何进一步处理，即使有变量仍然被更新。

UIKit-Combine/GithubAPI.swift

import Foundation
import Combineenum APIFailureCondition: Error {case invalidServerResponse
}struct GithubAPIUser: Decodable {  // 1// A very *small* subset of the content available about//  a github API user for example:// https://api.github.com/users/heckjlet login: Stringlet public_repos: Intlet avatar_url: String
}struct GithubAPI {  // 2// NOTE(heckj): I've also seen this kind of API access// object set up with with a class and static methods on the class.// I don't know that there's a specific benefit to making this a value// type/struct with a function on it./// externally accessible publisher that indicates that network activity is happening in the API proxystatic let networkActivityPublisher = PassthroughSubject<Bool, Never>()  // 3/// creates a one-shot publisher that provides a GithubAPI User/// object as the end result. This method was specifically designed to/// return a list of 1 object, as opposed to the object itself to make/// it easier to distinguish a "no user" result (empty list)/// representation that could be dealt with more easily in a Combine/// pipeline than an optional value. The expected return type is a/// Publisher that returns either an empty list, or a list of one/// GithubAPUser, with a failure return type of Never, so it's/// suitable for recurring pipeline updates working with a @Published/// data source./// - Parameter username: username to be retrieved from the Github APIstatic func retrieveGithubUser(username: String) -> AnyPublisher<[GithubAPIUser], Never> {  // 4if username.count < 3 {  // 5return Just([]).eraseToAnyPublisher()}let assembledURL = String("https://api.github.com/users/\(username)")let publisher = URLSession.shared.dataTaskPublisher(for: URL(string: assembledURL)!).handleEvents(receiveSubscription: { _ in  // 6networkActivityPublisher.send(true)}, receiveCompletion: { _ innetworkActivityPublisher.send(false)}, receiveCancel: {networkActivityPublisher.send(false)}).tryMap { data, response -> Data in  // 7guard let httpResponse = response as? HTTPURLResponse,httpResponse.statusCode == 200 else {throw APIFailureCondition.invalidServerResponse}return data}.decode(type: GithubAPIUser.self, decoder: JSONDecoder())  // 8.map {[$0]  // 9 }.catch { err in  // 10// When I originally wrote this method, I was returning// a GithubAPIUser? optional.// I ended up converting this to return an empty// list as the "error output replacement" so that I could// represent that the current value requested didn't *have* a// correct github API response.return Just([])}.eraseToAnyPublisher()  // 11return publisher}
}
  1. 此处创建的 decodable 结构体是从 GitHub API 返回的数据的一部分。 在由 decode 操作符处理时，任何未在结构体中定义的字段都将被简单地忽略。
  2. 与 GitHub API 交互的代码被放在一个独立的结构体中，我习惯于将其放在一个单独的文件中。 API 结构体中的函数返回一个发布者，然后与 ViewController 中的其他管道进行混合合并。
  3. 该结构体还使用 passthroughSubject 暴露了一个发布者，使用布尔值以在发送网络请求时反映其状态。
  4. 我最开始创建了一个管道以返回一个可选的 GithubAPIUser 实例，但发现没有一种方便的方法来在失败条件下传递 “nil” 或空对象。 然后我修改了代码以返回一个列表，即使只需要一个实例，它却能更方便地表示一个“空”对象。 这对于想要在对 GithubAPIUser 对象不再存在后，在后续管道中做出响应以擦除现有值的情况很重要 —— 这时可以删除 repositoryCount 和用户头像的数据。
  5. 这里的逻辑只是为了防止无关的网络请求，如果请求的用户名少于 3 个字符，则返回空结果。
  6. handleEvents 操作符是我们触发网络请求发布者更新的方式。 我们定义了在订阅和终结（完成和取消）时触发的闭包，它们会在 passthroughSubject 上调用 send()。 这是我们如何作为单独的发布者提供有关管道操作的元数据的示例。
  7. tryMap 添加了对来自 github 的 API 响应的额外检查，以将来自 API 的不是有效用户实例的正确响应转换为管道失败条件。
  8. decode 从响应中获取数据并将其解码为 GithubAPIUser 的单个实例。
  9. map 用于获取单个实例并将其转换为单元素的列表，将类型更改为 GithubAPIUser 的列表：[GithubAPIUser]。
  10. catch 运算符捕获此管道中的错误条件，并在失败时返回一个空列表，同时还将失败类型转换为 Never。
  11. eraseToAnyPublisher 抹去链式操作符的复杂类型，并将整个管道暴露为 AnyPublisher 的一个实例。

2. UIKit-Combine/GithubViewController.swift

import UIKit
import Combineclass ViewController: UIViewController {@IBOutlet weak var github_id_entry: UITextField!@IBOutlet weak var activityIndicator: UIActivityIndicatorView!@IBOutlet weak var repositoryCountLabel: UILabel!@IBOutlet weak var githubAvatarImageView: UIImageView!var repositoryCountSubscriber: AnyCancellable?var avatarViewSubscriber: AnyCancellable?var usernameSubscriber: AnyCancellable?var headingSubscriber: AnyCancellable?var apiNetworkActivitySubscriber: AnyCancellable?// username from the github_id_entry field, updated via IBAction@Published var username: String = ""// github user retrieved from the API publisher. As it's updated, it// is "wired" to update UI elements@Published private var githubUserData: [GithubAPIUser] = []// publisher reference for this is $username, of type <String, Never>var myBackgroundQueue: DispatchQueue = DispatchQueue(label: "viewControllerBackgroundQueue")let coreLocationProxy = LocationHeadingProxy()// MARK - Actions@IBAction func githubIdChanged(_ sender: UITextField) {username = sender.text ?? ""print("Set username to ", username)}// MARK - lifecycle methodsoverride func viewDidLoad() {super.viewDidLoad()// Do any additional setup after loading the view.let apiActivitySub = GithubAPI.networkActivityPublisher  // 1.receive(on: RunLoop.main).sink { doingSomethingNow inif (doingSomethingNow) {self.activityIndicator.startAnimating()} else {self.activityIndicator.stopAnimating()}}apiNetworkActivitySubscriber = AnyCancellable(apiActivitySub)usernameSubscriber = $username  // 2.throttle(for: 0.5, scheduler: myBackgroundQueue, latest: true)// ^^ scheduler myBackGroundQueue publishes resulting elements// into that queue, resulting on this processing moving off the// main runloop..removeDuplicates().print("username pipeline: ") // debugging output for pipeline.map { username -> AnyPublisher<[GithubAPIUser], Never> inreturn GithubAPI.retrieveGithubUser(username: username)}// ^^ type returned in the pipeline is a Publisher, so we use// switchToLatest to flatten the values out of that// pipeline to return down the chain, rather than returning a// publisher down the pipeline..switchToLatest()// using a sink to get the results from the API search lets us// get not only the user, but also any errors attempting to get it..receive(on: RunLoop.main).assign(to: \.githubUserData, on: self)// using .assign() on the other hand (which returns an// AnyCancellable) *DOES* require a Failure type of <Never>repositoryCountSubscriber = $githubUserData  // 3.print("github user data: ").map { userData -> String inif let firstUser = userData.first {return String(firstUser.public_repos)}return "unknown"}.receive(on: RunLoop.main).assign(to: \.text, on: repositoryCountLabel)let avatarViewSub = $githubUserData  // 4.map { userData -> AnyPublisher<UIImage, Never> inguard let firstUser = userData.first else {// my placeholder data being returned below is an empty// UIImage() instance, which simply clears the display.// Your use case may be better served with an explicit// placeholder image in the event of this error condition.return Just(UIImage()).eraseToAnyPublisher()}return URLSession.shared.dataTaskPublisher(for: URL(string: firstUser.avatar_url)!)// ^^ this hands back (Data, response) objects.handleEvents(receiveSubscription: { _ inDispatchQueue.main.async {self.activityIndicator.startAnimating()}}, receiveCompletion: { _ inDispatchQueue.main.async {self.activityIndicator.stopAnimating()}}, receiveCancel: {DispatchQueue.main.async {self.activityIndicator.stopAnimating()}}).receive(on: self.myBackgroundQueue)// ^^ do this work on a background Queue so we don't impact// UI responsiveness.map { $0.data }// ^^ pare down to just the Data object.map { UIImage(data: $0)!}// ^^ convert Data into a UIImage with its initializer.catch { err inreturn Just(UIImage())}// ^^ deal the failure scenario and return my "replacement"// image for when an avatar image either isn't available or// fails somewhere in the pipeline here..eraseToAnyPublisher()// ^^ match the return type here to the return type defined// in the .map() wrapping this because otherwise the return// type would be terribly complex nested set of generics.}.switchToLatest()// ^^ Take the returned publisher that's been passed down the chain// and "subscribe it out" to the value within in, and then pass// that further down..receive(on: RunLoop.main)// ^^ and then switch to receive and process the data on the main// queue since we're messing with the UI.map { image -> UIImage? inimage}// ^^ this converts from the type UIImage to the type UIImage?// which is key to making it work correctly with the .assign()// operator, which must map the type *exactly*.assign(to: \.image, on: self.githubAvatarImageView)// convert the .sink to an `AnyCancellable` object that we have// referenced from the implied initializersavatarViewSubscriber = AnyCancellable(avatarViewSub)// KVO publisher of UIKit interface elementlet _ = repositoryCountLabel.publisher(for: \.text)  // 5.sink { someValue inprint("repositoryCountLabel Updated to \(String(describing: someValue))")}}}
  1. 我们向我们之前的 controller 添加一个订阅者，它将来自 GithubAPI 对象的活跃状态的通知连接到我们的 activityIndicator。
  2. 从 IBAction 更新用户名的地方（来自我们之前的示例 通过用户输入更新声明式 UI）我们让订阅者发出网络请求并将结果放入一个我们的 ViewController 的新变量中（还是 @Published）。
  3. 第一个订阅者连接在发布者 $githubUserData 上。 此管道提取用户仓库的个数并更新到 UILabel 实例上。 当列表为空时，管道中间有一些逻辑来返回字符串 “unknown”。
  4. 第二个订阅者也连接到发布者 $githubUserData。 这会触发网络请求以获取 github 头像的图像数据。 这是一个更复杂的管道，从 githubUser 中提取数据，组装一个 URL，然后请求它。 我们也使用 handleEvents 操作符来触发对我们视图中的 activityIndi​​cator 的更新。 我们使用 receive 在后台队列上发出请求，然后将结果传递回主线程以更新 UI 元素。 catch 和失败处理在失败时返回一个空的 UIImage 实例。
  5. 最终订阅者连接到 UILabel 自身。 任何来自 Foundation 的 Key-Value Observable 对象都可以产生一个发布者。 在此示例中，我们附加了一个发布者，该发布者触发 UI 元素已更新的打印语句。

虽然我们可以在更新 UI 元素时简单地将管道连接到它们，但这使得和实际的 UI 元素本身耦合更紧密。 虽然简单而直接，但创建明确的状态，以及分别对用户行为和数据做出更新是一个好的建议，这更利于调试和理解。 在上面的示例中，我们使用两个 @Published 属性来保存与当前视图关联的状态。 其中一个由 IBAction 更新，第二个使用 Combine 发布者管道以声明的方式更新。 所有其他的 UI 元素都依赖这些属性的发布者更新时进行更新。

3. 运行结果

在这里插入图片描述

json from https://api.github.com/users/zgpeace

{"login": "zgpeace","id": 2386257,"node_id": "MDQ6VXNlcjIzODYyNTc=","avatar_url": "https://avatars.githubusercontent.com/u/2386257?v=4","gravatar_id": "","url": "https://api.github.com/users/zgpeace","html_url": "https://github.com/zgpeace","followers_url": "https://api.github.com/users/zgpeace/followers","following_url": "https://api.github.com/users/zgpeace/following{/other_user}","gists_url": "https://api.github.com/users/zgpeace/gists{/gist_id}","starred_url": "https://api.github.com/users/zgpeace/starred{/owner}{/repo}","subscriptions_url": "https://api.github.com/users/zgpeace/subscriptions","organizations_url": "https://api.github.com/users/zgpeace/orgs","repos_url": "https://api.github.com/users/zgpeace/repos","events_url": "https://api.github.com/users/zgpeace/events{/privacy}","received_events_url": "https://api.github.com/users/zgpeace/received_events","type": "User","site_admin": false,"name": "zgpeace","company": "HSBC","blog": "https://blog.csdn.net/zgpeace","location": "guangzhou","email": null,"hireable": null,"bio": "AI, CNN, AutoDrive, Architect, Full Stack Developer\r\n\r\nEver work in Alibaba","twitter_username": "zgpeace","public_repos": 138,"public_gists": 5,"followers": 12,"following": 12,"created_at": "2012-09-20T13:55:28Z","updated_at": "2023-12-27T06:44:33Z"
}

参考

https://heckj.github.io/swiftui-notes/index_zh-CN.html

代码

https://github.com/heckj/swiftui-notes

这篇关于Swift Combine 级联多个 UI 更新，包括网络请求 从入门到精通十六的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/711689。

相关文章

基于Flask框架添加多个AI模型的API并进行交互

基于Flask框架添加多个AI模型的API并进行交互

《基于Flask框架添加多个AI模型的API并进行交互》：本文主要介绍如何基于Flask框架开发AI模型API管理系统,允许用户添加、删除不同AI模型的API密钥,感兴趣的可以了解下... 目录1. 概述2. 后端代码说明2.1 依赖库导入2.2 应用初始化2.3 API 存储字典2.4 路由函数2.5 应
阅读更多...
MySQL新增字段后Java实体未更新的潜在问题与解决方案

MySQL新增字段后Java实体未更新的潜在问题与解决方案

《MySQL新增字段后Java实体未更新的潜在问题与解决方案》在Java+MySQL的开发中,我们通常使用ORM框架来映射数据库表与Java对象,但有时候,数据库表结构变更（如新增字段）后,开发人员可... 目录引言1. 问题背景：数据库与 Java 实体不同步1.1 常见场景1.2 示例代码2. 不同操作
阅读更多...
SpringBoot使用OkHttp完成高效网络请求详解

SpringBoot使用OkHttp完成高效网络请求详解

《SpringBoot使用OkHttp完成高效网络请求详解》OkHttp是一个高效的HTTP客户端,支持同步和异步请求,且具备自动处理cookie、缓存和连接池等高级功能,下面我们来看看SpringB... 目录一、OkHttp 简介二、在 Spring Boot 中集成 OkHttp三、封装 OkHttp
阅读更多...
Linux系统之主机网络配置方式

Linux系统之主机网络配置方式

《Linux系统之主机网络配置方式》：本文主要介绍Linux系统之主机网络配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、查看主机的网络参数1、查看主机名2、查看IP地址3、查看网关4、查看DNS二、配置网卡1、修改网卡配置文件2、nmcli工具【通用
阅读更多...
使用Python高效获取网络数据的操作指南

使用Python高效获取网络数据的操作指南

《使用Python高效获取网络数据的操作指南》网络爬虫是一种自动化程序,用于访问和提取网站上的数据,Python是进行网络爬虫开发的理想语言,拥有丰富的库和工具,使得编写和维护爬虫变得简单高效,本文将... 目录网络爬虫的基本概念常用库介绍安装库Requests和BeautifulSoup爬虫开发发送请求解
阅读更多...
一文详解SQL Server如何跟踪自动统计信息更新

一文详解SQL Server如何跟踪自动统计信息更新

《一文详解SQLServer如何跟踪自动统计信息更新》SQLServer数据库中,我们都清楚统计信息对于优化器来说非常重要,所以本文就来和大家简单聊一聊SQLServer如何跟踪自动统计信息更新吧... SQL Server数据库中，我们都清楚统计信息对于优化器来说非常重要。一般情况下，我们会开启"自动更新
阅读更多...
Python实现合并与拆分多个PDF文档中的指定页

Python实现合并与拆分多个PDF文档中的指定页

《Python实现合并与拆分多个PDF文档中的指定页》这篇文章主要为大家详细介绍了如何使用Python实现将多个PDF文档中的指定页合并生成新的PDF以及拆分PDF,感兴趣的小伙伴可以参考一下... 安装所需要的库pip install PyPDF2 -i https://pypi.tuna.tsingh
阅读更多...
Go语言中最便捷的http请求包resty的使用详解

Go语言中最便捷的http请求包resty的使用详解

《Go语言中最便捷的http请求包resty的使用详解》go语言虽然自身就有net/http包,但是说实话用起来没那么好用,resty包是go语言中一个非常受欢迎的http请求处理包,下面我们一起来学... 目录安装一、一个简单的get二、带查询参数三、设置请求头、body四、设置表单数据五、处理响应六、超
阅读更多...
Python FastAPI入门安装使用

Python FastAPI入门安装使用

《PythonFastAPI入门安装使用》FastAPI是一个现代、快速的PythonWeb框架,用于构建API,它基于Python3.6+的类型提示特性,使得代码更加简洁且易于绶护,这篇文章主要介... 目录第一节：FastAPI入门一、FastAPI框架介绍什么是ASGI服务（WSGI）二、FastAP
阅读更多...
Qt实现发送HTTP请求的示例详解

Qt实现发送HTTP请求的示例详解

《Qt实现发送HTTP请求的示例详解》这篇文章主要为大家详细介绍了如何通过Qt实现发送HTTP请求,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、添加network模块2、包含改头文件3、创建网络访问管理器4、创建接口5、创建网络请求对象6、创建一个回复对
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2