VueJS异步与并发管理

点击关注“八戒技术团队”，阅读更多技术干货

前端开发中常用到的实现异步操作的方式是使用Promise和Async函数，为什么要使用Task来定义异步操作呢？

原因是Promise和Async函数都存在一个痛点：无法取消。比如，Async函数一旦开始执行，就会一直执行下去，无法从外部中止它。相比之下，Task的最大特点就是它支持取消。如下图：

该如何解决这个问题呢？

这里我们引入现代编程语言中的结构化并发(Structured Concurrency)的概念，使用结构化并发的思路来解决面临的问题。

结构化并发类似于我们从所有现代编程语言中知道的结构化编程。结构化编程防止了代码的随机跳转，而是将程序结构为一组嵌套的代码块。块的生命周期永远不会重叠。如果块B嵌套在块A中，则B的生存期不能超过A的生存期。同样，结构化并发防止线程A启动的线程B的生存期超过A的生存期： 

(图片来源: https://250bpm.com/blog:71/)

将结构化并发的思路引入到前端开发中来，就需要对异步操作的生命周期进行管理。一般来说，异步操作的生存期不能超过它所在的组件，也就是说，如果一个组件被移除了，由该组件触发的所有未执行完成的异步操作都应该被中止掉。

Vue-Concurrency 中的Task就是按照这个思路设计的，在组件移除前所有正在运行的Task会被自动中止。

使用Task来实现"10秒倒计时"的例子：

组件被移除前会中止所有未完成的Task的运行，这是由 Vue-Concurrency 自动完成的，不需要书写额外的代码。这保证了异步操作的生命周期不超过它所在组件的生命周期，避免了资源浪费和内存泄露。

前面讨论了异步操作的生命期管理，下面我们讨论异步操作的并发问题。

默认情况下，多次调用myTask.perform()，任务将并发运行。例如：

myTask.perform()；myTask.perform()；

myTask的两个实例将同时运行（除非它们所在的组件被销毁，在这种情况下它们将被取消）。

默认情况下，每次执行perform()后，都启动一个新的任务实例，它们同时执行，互不干涉。

通常情况下，我们希望一个任务在同一时间只有一个实例在运行。例如，有一个将页面数据保存到服务器的异步任务，我们不希望该任务同时运行——我们希望它按顺序运行(排队依次运行)，或者如果该任务已经在运行了，需要忽略该任务的后续调用(防重复提交)。

通过代码手动来实现这些限制枯燥且繁琐，这也是导致出现冗余的、容易出错的样板代码的根源。Vue-Concurrency 提供的并发管理能力可以很方便的实现对并发的控制，并且不会引入额外的冗余代码。