前端重构技巧:使用Promise和await提高异步逻辑的可读性(一)

前端业务越来越复杂,大量的异步逻辑嵌套让人不胜其烦。我在业务中遇到过这么一个例子:

用户在移动端app里面发表帖子,需要经过以下几个步骤:

1、调用登录api

2、保存用户数据到本地

3、使用用户数据申请发帖

4、在列表顶部插入用户新贴

最初的样子精简代码之后看起来是这样的:

哈哈,一个回调地狱的雏形出来了。那么如何去拆分呢。

Promise的特性是链式调用,因此我们用Promise将它包一层,将嵌套改成链式调用即可。


那么代码就变成了


怎么样,是不是简洁了许多。

但是这并不是最终完成体,因为es7新增了await特性,这就意味着我们连 *.then 这种方式都可以舍弃掉了,直接变成


实际使用中当然还需要你去处理error情况,这个后续我再另写一篇文章讨论。

还有一种情况,在循环中使用异步逻辑,其实只需要用Promise.all这个api即可解决。

比如我需要写个文件批量上传的功能,需要所有文件上传完毕之后弹出一个提示框。


改造成await形式



觉得写得好的老铁们麻烦点个赞哦

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。