前端业务越来越复杂,大量的异步逻辑嵌套让人不胜其烦。我在业务中遇到过这么一个例子:
用户在移动端app里面发表帖子,需要经过以下几个步骤:
1、调用登录api
2、保存用户数据到本地
3、使用用户数据申请发帖
4、在列表顶部插入用户新贴
最初的样子精简代码之后看起来是这样的:
哈哈,一个回调地狱的雏形出来了。那么如何去拆分呢。
Promise的特性是链式调用,因此我们用Promise将它包一层,将嵌套改成链式调用即可。
那么代码就变成了
怎么样,是不是简洁了许多。
但是这并不是最终完成体,因为es7新增了await特性,这就意味着我们连 *.then 这种方式都可以舍弃掉了,直接变成
实际使用中当然还需要你去处理error情况,这个后续我再另写一篇文章讨论。
还有一种情况,在循环中使用异步逻辑,其实只需要用Promise.all这个api即可解决。
比如我需要写个文件批量上传的功能,需要所有文件上传完毕之后弹出一个提示框。
改造成await形式
觉得写得好的老铁们麻烦点个赞哦