小程序做异步,实际上就是让后台慢慢干活,前端别急。别总想一步登天,用户跟界面唠嗑,后台还得去跑个数据库查个数据。 实际上好办点说,就是两个地方与此同时作业,一方在干活,一方在等结局。
那会儿大家非要把这俩关绑死,数据还没回来就弹窗说“你做完了”,那体验直接崩。目前好了,只要写个提示框,告诉用户“我在处理”,用户就能骑个凉快的马。
这就像你去餐厅做饭,你坐在座位上跟服务员说“你好”没门,得等菜端上来你才能坐,否则你在那坐着慢慢看菜单,服务员可能刚给你倒杯汤呢。微信得搞个提示框:【请稍后,系统繁忙】,用户等得心急。 那到底咋用呢?有个最好办的例子,你想知道微信目前有多少人,这得查数据库。你得先在小程序里写个数据请求,告诉服务器“我要查这个”,服务器收到指令后,后台去查,查完了再给你个 JSON 数据框回来。
这时候前端别急着点那个按钮,得先把那个提示框给弹出来。用户点击“获取人数”后,后端收到请求,后台查出数据,数据回来了,前端再更新那个界面。整个过程中间空了半拍,用户就得看提示框,心里默数:一秒、两秒、三秒…… 实际上这种“先占着,后干活”的模式,在微信开发里特常见。
比如你想发个红包,发钱你得算算余额,算完你得拿个号。
这都涉及到几个步骤:先调接口查余额,再调接口拿号,最终去支付。你要是把这几个接口写得像写代码一样,用户点一下就 xong,那忒假了。你得让用户认定你在“操作”,而不是在“点击”。
故此这时候得把这三个步骤做成一个整体,前端收到提示框,心里想:哦,系统要办事了,我先点“我已预备好”,等系统忙完了再点“确认支付”。 还有一个场景,比如用户选个导航,你得先查地图数据。
这得分两步走,第一步前端把用户选的点传那会儿,后端收到后去查地图,查完回来把结局给前端。前端再把这个结局渲染到地图上。用户点下“显示路线”,这时候后端还得去查交通状况。
这步得再等个 3 秒左右,不然用户急坏了。
这时候前端得把“查询中”的提示框给弹出来,等后端把路况查完再弹个“到达终点”的提示。中间这个等待过程,用户只能看提示,不能点按钮,否则他点啥按钮? 实际上这种异步的精髓就在“占位”。前端拿到接口回的提示框,比如“加载中”,这时候前端就知道:哎呀,数据还没好,我得先干别的。
比如用户正在选选项,系统说“正在校验”,前端就得先把这个选项给冻结,让用户别动,等校验完再让他选。
要是前端硬要点,可能整个页面都卡住,用户体验极差。 再深一点,有时候异步还得搞定加载顺序。
比如一个列表页,你得先查用户列表,再查订单详情。你要是先把详情查出来,用户点完付款又想看用户列表,那用户得在那儿等,体验绝了。
这时候就得把接口定义写得明白,告诉后端“我先发用户列表,再发订单详情,顺序不能乱”。后端收到后,先查用户列表,把数据给前端,前端再查订单详情,把数据给前端。中间的分隔线,就是提示框的边界。 还有,异步有时候还得配合毛病处理。
比如查数据黄了,你得说清楚。接口答应回数据,结局给你个 404 要么 401。
这时候前端得把毛病提示框给弹出来,告诉用户“数据挂了,网络不好”。
这时候前端得先处理毛病,比如把那个列表清空,提示用户“请稍再试”。
要是前端没处理,用户看着一个一辈子转圈的界面,那就不好了。
这时候前端得主动做点啥,比如显示重试按钮,要么换个提示语,比如“网络信号不好,稍后重试”。 实际上这种异步逻辑在微信里用得忒多忒熟了。
比如用户点亮某个图标,你得先查一下状态,状态查完了再点亮。
要么用户搜索,你得先查商品,查完再显示结局。就连有时候一个请求里要查多个数据,比如查用户信息和查地址,这两个数据还得分开去查,出于一个是查套餐,一个是查地址。
这时候就得把查询分成两个不同的逻辑分支,前端分别处理。 有时候还得搞个“占位符”概念。
比如在列表页,用户点击了某个项目,这时候你得去查项目详情。查完了再展示。但用户还没点详情,这时候你就不能直接展示详情,你得先显示一个“加载中”的占位符。用户点完,后端查完了,前端再把那个占位符给替换成详情。
这就叫占位符。
要是不搞占位符,用户点下,屏幕瞬间变满,那就不对了。 再讲个具体的数据例子。
比如你要做一个“搜索历史”功能。用户搜索一下,你得去查数据库。假设这个接口回是异步的。前端收到提示框,然后用户点击“我搜索过”,这时候前端得去查搜索历史。查完了再显示。
要是用户没有搜索过,那就显示“暂无搜索历史”。
这样用户才知道是不是查得慢,还是没数据。 实际上这种异步逻辑的核心就是“延迟知足”。用户要的不是立马看到结局,而是立马看到反馈。
那个反馈窗口,就是系统忙完后的窗口。用户在这个窗口里做点啥。
比如用户点“刷新”,这得去查一下。
要是查完了,再刷新列表。
这中间务必有个提示框,告诉用户“正在更新数据”。用户点完刷新,后端查完了,前端再更新界面。 还有个细节,就是前端和后端要配合默契。后端写接口的时候,得预留出提示框的字段。
比如接口回里有个字段叫“status”,要是回 0 就表示忙。前端收到后,就把提示框给弹出来。
要是回 1 就表示好了,就显示数据。
这样前端就知道该不该显示数据了。 实际上这种逻辑不仅限于查数据,还有查图片、查视频。
比如用户点一张图,得去查图片内容。查完了再显示。
这时候就得有个提示框,告诉用户“正在加载图片”。用户点完,后端查完了,前端再显示图片。 这时候前端得注意一点,就是那个提示框不能忒死板。
比如用户点“加载中”,提示框里写“正在加载中”,这显得有点假。写“系统繁忙,请稍后”更自然点。用户看着这个提示框,心里想:哦,系统在忙,我得歇会儿。
这时候前端能够主动做一些事件,比如削减刷新频率,要么下降数据请求的数量。 实际上这种逻辑在微信里也是无处不在的。
比如用户点击“点赞”,你得先查点赞状态,查完再显示。
要么用户点击“转发”,你得去查转发日志,查完再显示。就连有时候一个按钮点多次,得去查一次新的数据。
这时候就得把查新数据和新数据的逻辑写清楚。 还有,有时候还得搞个“等待”机制。
比如用户点击“确认”,后端确认后,前端再显示成功。
这时候前端得先把那个按钮给禁用,告诉用户“确认中,别点别的”。
要是用户点别的,系统可能会报错,就连卡死整个页面。
这时候前端就得主动做点啥,比如显示“确认中,请勿操作”。 实际上这种异步逻辑,让开发变得不那么累。
那会儿得把所有数据查完再渲染,目前得分步来,用户还没看到数据,数据还没查完,你就得把界面占着,让用户认定你在给他服务。 最终总结一下,做异步就是分步走。先占位,再干活,最终给结局。中间那个“加载”或“处理”的提示框,就是给用户的缓冲空间。用户在这个空间里做点啥,要么静静地看着,等待结局出现。
这种体验,才是真正符合微信这种即时通讯工具调性的。