消除异步的传染性(代数效应)

消除异步的传染性

什么是异步的传染性

• 异步函数具有传染性 比如一个函数中使用了 fetch 会导致调用他的函数也变成异步的.

如何消除传染性

• 将fetch 变成同步函数.
• 将fetch 返回的数据缓存起来
• 隔离异步函数在 throw 中

消除的过程称为 代数效应:

• 代数效应是一种方法, 可以"隔离函数中的副作用, 从而让函数变为纯函数"。
• 从实现机制角度来说, 代数效应可以看作是一种执行控制, 函数可以在某个需要执行副作用的地方暂停,保存并跳出当前执行栈, 沿调用栈向上找到这个副作用对应的处理函数(handlers), 处理函数执行完毕, 再从之前暂停的地方继续执行。
• react中的Suspense 就是利用了这个原理.
• B站视频
• React中的代数效应

    function getData() {
      const r = fetch('https://jsonplaceholder.typicode.com/posts', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                title: 'foo',
                body: 'bar',
                userId: 1
            }),
        });
      console.log(r);
    }
    function run(func) {
        let oldFetch = window.fetch;
        let cache = {
            value: '',
            status: 'pending',
        };
        window.fetch = function(...args) {
            if(cache && cache.status === 'fulfilled') {
                return cache.value;
            } else if(cache.status === 'rejected') {
                throw cache.value;
            }else {
                const prom = oldFetch(...args).then((res) => {
                    return res.json();
                }).then(res => {
                    cache.value = res;
                    cache.status = 'fulfilled';
                }).catch(err => {
                    cache.value = err;
                    cache.status = 'rejected';
                });

                throw prom;
            }
        }
        if(func) {
            try {
                func();
            }catch(err)  {
                if(err instanceof Promise) {
                    err.then(func, func).finally(() => {
                        window.fetch = oldFetch;
                    });
                }
            }
        }
    }
    run(getData);
    ```