如何消除异步的传染性

本文的知识点是笔者在抖音看到 渡一前端 发布的视频学习到的。笔者觉得处理问题的思路非常值得学习，因此来掘金分享一下。

前言

各位掘友好！本文跟大家分享一个关于 消除异步传染性 的知识点，你可能不熟悉甚至没听过异步传染性这个词，其实笔者也是最近才看到的，因此想着来分享一下！好了，接下来笔者会从两个方面来说这个知识点，一方面是概念，另一方面就是如何消除。

什么是 异步传染性

笔者通过一个例子来介绍异步传染性的概念。

10.10.55@2x.png" loading="lazy" src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/448eaad1c5f34f319bc3361fcad882ce~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp#?w=1234&h=528&s=154964&e=png&b=282a35"/>

上图中由于m2中的fetch是异步的，导致了使用m2的m1变成了async function；main 又使用了m1，从而main也变成了async function。类似这种现象就叫做异步的传染性。(可能你会觉得，为什么main不直接调m2，我们此处是为了理解这个概念，不要钻牛角尖😁)

m2就好像病毒🦠，m1明知道到m2有毒，还要来挨着，结果就被传染了，main也是一样。

那什么是消除传染性呢？就是希望不要 async/await，让mian、m1变成纯函数调用。也就是mian、m1不依赖fetch的状态。期望像下面这样调用：
10.52.24@2x.png" loading="lazy" src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba99c7db117e46319d778002889c51ee~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp#?w=924&h=498&s=64284&e=png&b=282a35"/>

纯函数：

1. 
   
2. 输入决定输出： 纯函数的输出完全由输入决定，即相同的输入始终产生相同的输出。这意味着函数不依赖于外部状态，也不会对外部状态进行修改。
   
3. 没有副作用： 纯函数没有副作用，即在函数的执行过程中不会对除函数作用域外的其他部分产生影响。它不会修改全局变量、改变输入参数或进行文件IO等操作。
   

纯函数在函数式编程中具有重要作用，因为它们易于理解、测试和维护。由于不依赖于外部状态，纯函数可以很好地并行执行，也有助于避免常见的错误，例如竞态条件和不确定性行为。

接下来咱们就分析一下要如何实现消除。

如何消除

当我们把async/await去掉之后，就变成了同步调用，那么m2返回的肯定是pending状态的promise，main得到的也是，肯定达不到我们想要的效果。

那我们能不能等promise变成fulfilled/rejected状态再接着执行main？

可以，第一次调用main，我们直接throw，第一次调用就会终止，然后等promise变成fulfilled/rejected状态，我们将返回结果或错误信息缓存一下，再调用一次main，再次调用时存在缓存，直接返回缓存即可，此时也就变成了同步。流程图如下：

11.30.26@2x.png" loading="lazy" src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dc591e6d9bf24b4eb0d3e78fecf5dcc1~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp#?w=1590&h=1048&s=165391&e=png&b=fdfdfd"/>

具体实现如下：
11.34.06@2x.png" loading="lazy" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e9b4193e4c6c4a35850c487f1ad0bcbc~tplv-k3u1fbpfcp-zoom-in-crop-mark:1512:0:0:0.awebp#?w=1494&h=1336&s=353606&e=png&b=282a35"/>

效果如下：

到此本次分享的内容就完了，感谢阅读！

总结

本文通过简单的例子，描述了什么是异步的传染性，以及如何利用缓存、throw、重写fetch实现了消除异步的传染性。

如果本文对你有一点点帮助，点个赞支持一下吧，你的每一个【赞】都是我创作的最大动力 ^_^<