当前位置：公众IT > 技术文章 > 可以支持异步 setData 吗？

可以支持异步 setData 吗？

新闻来源：互联网资料整理发布时间：2023/4/5 16:44:58 共计：4610 浏览

前言：

1小时前小编发现微信小程序用户：【喵老师】提出了一个关于“可以支持异步 setData 吗？”的问题,在问题中开发者喵老师对该问题做了如下阐述：

问题类型：

API和组件:

问题描述：

目前在 async/await 中参入回调式 setData 函数显得非常别扭，举个列子，我希望在请求完成后不论成功与否都处理一些单独的业务逻辑：
try { const { data: res } = await fetch.getRes('/get', { page: 1, limit: 10 }) if (res.code === 0) { this.setData({ count: res.data.count, list: res.data.list }, () => { doSomeThings1() doSomeThings2() }) } else { wx.showToast({ title: res.data.msg, icon: 'none' }) doSomeThings1() doSomeThings2() } } catch (err) { wx.showToast({ title: '服务器开小差了', icon: 'none' }) doSomeThings1() doSomeThings2() }

会看到上面出现了大量重复代码，增加代码阅读成本，降低开发效率。当然，可以单独封装一下逻辑，例如下面这样：
const doThings = () => { doSomeThings1() doSomeThings2() } try { const { data: res } = await fetch.getRes('/get', { page: 1, limit: 10 }) if (res.code === 0) { this.setData({ count: res.data.count, list: res.data.list }, doThings) } else { wx.showToast({ title: res.data.msg, icon: 'none' }) doThings() } } catch (err) { wx.showToast({ title: '服务器开小差了', icon: 'none' }) doThings() }

这时候仍然可以看到出现了三次重复的逻辑。
如果有 setDataAsync 方法，代码看上去会像下面这样更加简洁：
try { const { data: res } = await fetch.getRes('/path', { page: 1, limit: 10 }) if (res.code === 0) { await this.setDataSync({ count: res.data.count, list: res.data.list }) } else { wx.showToast({ title: res.data.msg, icon: 'none' }) } } catch (err) { wx.showToast({ title: '服务器开小差了', icon: 'none' }) } doSomeThings1() doSomeThings2()

当然，也许可以自己定义一个 setDataAsync 方法，像这样：
Page({ /** * 异步设置数据 * @param {Record<string, any>} data * @returns {Promise<void>} */ setDataAsync(data) { return new Promise(resolve => void this.setData(data, resolve)) } })

可是上面这么做存在一些问题：
每个页面/组件都需要手动写上该方法，仍然会增加大量的重复代码。
结合 TypeScript 时，无法和 setData 一样获得良好的代码补全（setData 方法可以获得在 data 中定义的属性并自动补全）。

以上是目前我开发时遇到的问题，目前能想到的方案是支持异步 setData，可以考虑两种方式：
让原有的 setData 返回 Promise，原有 callback 保持不变。
新增 setDataAsync 异步方法。
个人认为第一种方式更好些，希望开发团队考虑下。