xinglie / xinglie.github.io

blog
https://xinglie.github.io
153 stars 22 forks source link

告别保存数据时的接口等待 #116

Open xinglie opened 8 months ago

xinglie commented 8 months ago

本方案适用于分步或保存调用接口耗时的场景

以表单中支持文件上传为例。

文件上传

假设文件选择后提交给A服务器,提交成功后A服务器会返回一个文件标识,以供后续的其它使用

业务保存

假设表单中的其它数据,连同前面文件服务器A返回的文件标识需要提交给B服务器

传统做法需要在提交表单保存时,校验文件是否上传成功,或等待A服务器返回后才可以继续提交给B服务器,此时用户就需要等待,如果A服务器需要长时间的处理,那么用户就需要等待较长的时间,体验下降

我们能否做到用户选择文件后、完善表单其它必填字段后就可以提交保存按钮?然后离开当前页面继续处理其它事情?

假设

假设用户都是使用我们提供的界面进行的数据提交处理,绕过我们前端界面的我们不处理

假设接口大部分情况下都是正常的,异常的我们在接下来仍会处理和讨论到

所以如果前端不需要等待后端接口的返回,将极大的提供使用体验和数据的处理能力(用户可直接离开页面做其它事情)

方案

采用全局异步任务管理的方式进行数据的提交,只要用户在表单上提供了足够的信息,那么后续我们调用接口就能保存成功(大部分情况下),因此我们只需要有地方保存着用户尚未提到给服务器的数据,在后台慢慢提交即可。

面对用户关闭浏览器,我们可以在每次提交任务时在界面上给出提示,告知用户可以切走页面但不要关闭,针对当前流行的单页应用,用户仍可切换到系统的其它页面进行查看或操作,不必要停留在提交页面

对于刷新或关闭浏览器,我们可以使用IndexedDB进行数据的持久化存储,在下次用户进行系统时再提交

对于接口保存发生了异常,我们可以在系统中某个地方进行全局异步任务列表的展示,用户可点击某个任务进行恢复到相关表单的现场,用户可修改某些数据后再次提交