3322网建站,北京通州个人网站建设,国内优秀网站推荐,dw做的网站如何上传云服务器文章目录 背景整理思路V1版本V2版本V3版本 背景
最近在写uniapp#xff0c;发现执行网络请求的时候经常要处理Loading效果。
比如#xff0c;在发送网络请求之前#xff0c;触发Loadng#xff1b;无论请求成功还是失败都要关闭Loading#xff1b;请求失败的时候我们还要… 文章目录 背景整理思路V1版本V2版本V3版本 背景
最近在写uniapp发现执行网络请求的时候经常要处理Loading效果。
比如在发送网络请求之前触发Loadng无论请求成功还是失败都要关闭Loading请求失败的时候我们还要给用户一个友好的提示比如“服务器打了个盹”。
每次都要手动处理真的很麻烦而且处理Loading的逻辑跟业务逻辑混在一起也不便于维护。
因此我打算把这个需求封装成要一个方法就叫loadingRun。
这个方法并不是一蹴而就的经历了几个版本的迭代。我强烈建议你看完这篇文章你一定能有所收获。 虽然是以uniapp代码演示的但是思路是通用的。 整理思路
在封装之前我们先看看封装之前代码长啥样
uni.showLoading({mask: true})
uniCloud.database().collection(orders).doc(props.orderId).get({getOne: true}).then(res {Object.assign(order, res.result.data)uni.hideLoading()
}).catch(_ {uni.hideLoading().then(_ uni.showToast({icon: fail,title: 服务器打了个盹}))
}).finally(_ uni.hideLoading())有些小伙伴可能不熟悉uniapp所以我们解释一下部分代码
uniCloud.database().collection(orders).doc(props.orderId).get({getOne: true})这是uniapp的uniCloud的操作执行的是网络请求返回的是一个promise。uni.showLoading() uniapp 提供的显示Loading的api。uni.hideLoading() uniapp 提供的关闭Loading的api。uni.showToast() uniapp 提供的显示Toast提示api。
这些你都可以想象成自己熟悉的UI框架的操作。
我们需要把这个方法抽成一个通用的loadingRun方法首先不管三七二十一我们先把这个方法写出来
function loadingRun() {uni.showLoading({mask: true})uniCloud.database().collection(orders).doc(props.orderId).get({getOne: true}).then(res {Object.assign(order, res.result.data)uni.hideLoading()}).catch(_ {uni.hideLoading().then(_ uni.showToast({icon: fail,title: 服务器打了个盹}))}).finally(_ uni.hideLoading())
}然后我们就想有哪些操作是可以提取出来作为loadingRun的参数。 最容易想到的就是Object.assign(order, res.result.data)这行代码这行代码是promise解决之后处理逻辑我们可以把它提取成一个resolve参数
function loadingRun(resolve) {uni.showLoading({mask: true})uniCloud.database().collection(orders).doc(props.orderId).get({getOne: true}).then(res {resolve(res)uni.hideLoading()}).catch(_ {uni.hideLoading().then(_ uni.showToast({icon: fail,title: 服务器打了个盹}))}).finally(_ uni.hideLoading())
}还有什么可以提取的呢uniCloud.database().collection(orders).doc(props.orderId).get({getOne: true})这个操作我们可以提取因为的网络操作是不固定的。它是一个promise我们先不管三七二十一先用一promise来接收
function loadingRun(promise, resolve) {uni.showLoading({mask: true})promise.then(res {resolve(res)uni.hideLoading()}).catch(_ {uni.hideLoading().then(_ uni.showToast({icon: fail,title: 服务器打了个盹}))}).finally(_ uni.hideLoading())
}还能再抽吗貌似toast提醒的文案可以抽出来不过我们整站的提示都是统一的所以就不抽了。
现在就可以了吗显然不是它还有问题有大问题我们接着聊。
V1版本
我们前面讲了封装loadingRun的思路就是“抽”、“抽”、“抽”先不管合理不合理先抽再说。这样可以让我们最快的得到一个基本的骨架
function loadingRun(promise, resolve) {uni.showLoading({mask: true})promise.then(res {resolve(res)uni.hideLoading()}).catch(_ {uni.hideLoading().then(_ uni.showToast({icon: fail,title: 服务器打了个盹}))}).finally(_ uni.hideLoading())
}看着不错实际有大问题你知道是啥问题吗
问题就是loadingRun直接接收了一个promise实例。
为啥直接接收就有问题呢因为promise是创建时立即执行的所以loadingRun执行的时候promise可能已经执行完了网络请求可能都返回了此时在才显示Loading黄瓜菜都凉了。
所以loadingRun不能从外部接收一个promise我们需要在loadingRun内部创建这个promise。 我们可以让外部传入一个方法promiseGenerator这个方法执行会产生一个promise
function loadingRun(promiseGenerator, resolve) {uni.showLoading({mask: true})promiseGenerator().then(res {resolve(res)uni.hideLoading()}).catch(_ {uni.hideLoading().then(_ uni.showToast({icon: fail,title: 服务器打了个盹}))}).finally(_ uni.hideLoading())
}至此我们获得了V1版本的loadingRun我们前面代码可以用loadingRun来重构一下
loadingRun(_ uniCloud.database().collection(orders).doc(props.orderId).get({getOne: true}), res Object.assign(order, res.result.data))看起来没那么清晰对吧我们再改进一下
// 把获取订单的操作封装到一个方法中
function getOrderAsync(id) {return uniCloud.database().collection(orders).doc(id).get({getOne: true})
}
// 封装处理逻辑
function reactiveSetOrder(res) {Object.assign(order, res.result.data)
}现在的loadingRun就清晰了
loadingRun(getOrderAsync(props.id), reactiveSetOrder)当然后面这个封装不属于我门今天讨论的范畴。
V2版本
什么还有V2版本loadingRun还可以再优化吗
还真是现在的loadingRun接收一个promiseGeneratorpromiseGenerator产生一个promise实例。
如果我有一个很耗时的方法但是它不返回promise它也想用loadingRun怎么办呢
现在V1版本还不够通用我们需要让它变得更加通用。
我们可以这么处理我们把promiseGenerator参数换成更通用的func参数。如果它的结果是一个promise那么就走原来的逻辑否则我们把func的执行结果用Promise.resolve封装成一个promise走之前的逻辑。
这个叫参数归一化
我们先定一个方法判断变量是不是一个promise
function isPromiseLike(value) {return value ! null (typeof value object || typeof value function) typeof value.then function
}这里并不是直接用instanceof Promise判断而是判断变量是不是满足Promise A规范。
接下来我们改造loadingRun
function loadingRun(func, resolve) {uni.showLoading({mask: true})let ret func()let promise isPromiseLike(ret) ? ret : Promise.resolve(ret)promise.then(res {resolve(res)uni.hideLoading()}).catch(_ {uni.hideLoading().then(_ uni.showToast({icon: fail,title: 服务器打了个盹}))}).finally(_ uni.hideLoading())
}现在我们可以用loadingRun处理耗时的非promise操作了比如计算斐波那契数列
loadingRun(_ fibonacciRecursive(100000), val console.log(计算结果${val}))V3版本
啊还能再优化吗
还真实。现在的loadingRun已经够用了但是还有一个场景满足不了。
比如当网络请求或者耗时操作报错了我希望除了提示Toast还要执行一个其他的操作现在就没办法因为promise实例没有返回出来。
因此改造也很简单只需要把promise返回出来就行了。
function loadingRun(func, resolve) {uni.showLoading({ mask: true })let ret func()let promise isPromiseLike(ret) ? ret : Promise.resolve(ret)promise.then(res {resolve(res)uni.hideLoading()}).catch(_ {uni.hideLoading().then(_ uni.showToast({icon: fail,title: 服务器打了个盹}))}).finally(_ uni.hideLoading())return promise
}然后我们就可以这样处理
loadingRun(getOrderAsync(props.id), reactiveSetOrder).catch(_ doSomething())Game Over !!!
