写在前面
本文中提及的use
开头的函数,都出自与我的 ComposeHooks 项目,它提供了一系列 React Hooks 风格的状态封装函数,可以帮你更好的使用 Compose,无需关心复杂的状态管理,专注于业务与UI组件。
这是系列文章的第9篇,前文:
在前面的文章中,我们简单的介绍过 useRequest
这个hook,他被设计的高度抽象,同时也极易扩展,在下面的两个章节中,我将举两个例子,让你在业务中更好的使用它
自定义数据处理、自定义异常
一般来说我们的后台数据都有一个统一的包装格式,大概这样:
@Serializable
data class BaseResp<T>(
val data: T? = null,
val status: Int,
val message: String? = null
)
通常我们只关心我们的业务数据,也就是 data
,如果直接使用 useRequest
,我们就需要在 UI 代码中进行解包装,这多少有点麻烦。
另一个就是后台的自定义错误类型,后台将接口报错进行更友好的包装,我们需要判断返回值的状态码 status
来确定业务是否错误,而不是简单的将数据填充到 useRequest
的 data 中。
我们只需要进行如下操作,即可扩展:
@Composable
fun useAsyncRequest(
requestFn: suspend (TParams) -> BaseResp<TData>,
optionsOf: RequestOptions<BaseResp<TData>>.() -> Unit = {},
): RequestHolder {
val holder = useRequest(
requestFn,
optionsOf = optionsOf
)
val resp by holder.data
val reqErr by holder.error
var myData by _useState(null)
var myError by _useState(null)
useEffect(resp, reqErr) {
if (resp.asBoolean()) {
if (resp.status == 200) {
myData = holder.data?.data
} else {
myError = BusinessErrors(resp.status, resp.message)
}
}
if (reqErr.asBoolean()) {
myError = reqErr
}
}
fun mutate(mutateFn: (TData?) -> TData) {
myData = mutateFn(myData)
}
return with(holder) {
RequestHolder(
data = myData,
isLoading = isLoading,
error = myError,
request = request,
mutate = ::mutate,
refresh = refresh,
cancel = cancel
)
}
}
这里的返回值并不需要与我一致,你如果不需要那么多函数完全可以自定义一个类型,或者使用 tuple 元组直接返回暴露
ps: 在后续版本,data、loading、error 将会转为
State
State
State
,届时,你需要使用by
来获取值
自定义插件扩展 useRequest
实现 mutate
回滚
之前我们介绍过,可以通过调用 mutate
函数实现乐观更新,乐观更新的概念我们不再复述.
如果乐观更新失败我们如何对数据回滚呢?
在直接使用 useRequest
的情况下,可以调用 usePrevious
来暂存 data 的上一个状态,在失败后调用 mutate 将上个状态回滚
例如一个修改用户名的场景 :
val (userInfoState, loadingState, _, _, mutate) = useRequest(
requestFn = { NetApi.userInfo(it[0] as String) },
optionsOf = {
defaultParams = arrayOf("junerver")
}
)
val userInfo by userInfoState
val previous by usePrevious(present = userInfo)
Row {
TButton(text = "changeName") {
mockFnChangeName(input.value)
if (userInfo.asBoolean()) {
mutate {
it!!.copy(name = input.value)
}
}
setInput("")
}
TButton(text = "rollback") {
previous?.let { mutate { _ -> it } }
}
}
previous?.let { mutate { _ -> it } }
这行代码可以放到 mockFnChangeName
的 onError
生命周期之下,这样在修改名称失败后就对乐观更新实施回滚
如果你有大量的乐观更新场景,每次都要写这么一堆代码,无疑是很麻烦的一件事,那么我们是否可以在每次请求成功之后保存成功状态,然后对外暴露一个函数,使用这个成功状态用作回滚。
完全可以,我们只需要写一个自定义插件就可以实现这一目标:
@Composable
private fun useRollbackPlugin(ref: MutableRef<() -> Unit>): Plugin = remember {
object : Plugin() {
var pervState: FetchState? = null
fun rollback() {
pervState?.let { fetchInstance.setState(it.asMap()) }
}
override val invoke: GenPluginLifecycleFn
get() = { fetch: Fetch, options: RequestOptions ->
initFetch(fetch, options)
object : PluginLifecycle() {
override val onMutate: PluginOnMutate
get() = {
pervState = fetch.fetchState
}
}
}
}.also { ref.current = it::rollback }
}
@Composable
fun useCustomPluginRequest(
requestFn: suspend (TParams) -> TData,
optionsOf: RequestOptions<TData>.() -> Unit = {},
): Tuple8, State<Boolean>, State, ReqFn, MutateFn, RefreshFn, CancelFn, RollbackFn> {
val rollbackRef = useRef(default = { })
val requestHolder = useRequest(
requestFn = requestFn,
optionsOf = optionsOf,
plugins = arrayOf({
useRollbackPlugin(ref = rollbackRef)
})
)
return with(requestHolder) {
tuple(
data,
isLoading,
error,
request,
mutate,
refresh,
cancel,
eighth = { rollbackRef.current.invoke() }
)
}
}
探索更多
好了以上就是 使用 hooks 的一些小小技巧,现在你可以自由的扩展 useRequest
来满足你对网络请求的个性化需求。
示例源码地址:Mutate 、CustomPlugin
项目开源地址:junerver/ComposeHooks
MavenCentral:hooks2
本项目已经迁移到 Compose Multiplatform ,使用新的工件 id:hooks2
如果你在 CMP 依赖,直接使用:
implementation("xyz.junerver.compose:hooks2:2.1.0-alpha0")
如果你在 Android 环境依赖,请使用 id:hooks2-android
:
implementation("xyz.junerver.compose:hooks2-android:2.1.0-alpha0")
详细迁移说明请查看wiki
欢迎使用、勘误、pr、star。
1、本站所有资源均从互联网上收集整理而来,仅供学习交流之用,因此不包含技术服务请大家谅解!
2、本站不提供任何实质性的付费和支付资源,所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用!
3、本站所有资源仅用于学习及研究使用,您必须在下载后的24小时内删除所下载资源,切勿用于商业用途,否则由此引发的法律纠纷及连带责任本站和发布者概不承担!
4、本站站内提供的所有可下载资源,本站保证未做任何负面改动(不包含修复bug和完善功能等正面优化或二次开发),但本站不保证资源的准确性、安全性和完整性,用户下载后自行斟酌,我们以交流学习为目的,并不是所有的源码都100%无错或无bug!如有链接无法下载、失效或广告,请联系客服处理!
5、本站资源除标明原创外均来自网络整理,版权归原作者或本站特约原创作者所有,如侵犯到您的合法权益,请立即告知本站,本站将及时予与删除并致以最深的歉意!
6、如果您也有好的资源或教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
7、如果您喜欢该资源,请支持官方正版资源,以得到更好的正版服务!
8、请您认真阅读上述内容,注册本站用户或下载本站资源即您同意上述内容!
原文链接:https://www.dandroid.cn/archives/22422,转载请注明出处。
评论0