快捷導(dǎo)航

以fetch為例詳解如何消除js異步的傳染性

更新時間：2023年12月12日 10:09:22 作者：smallStone

這篇文章主要為大家介紹了以fetch為例詳解如何消除js異步的傳染性示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

如何解決傳染性

在開發(fā)時候如果遇到一個函數(shù)需要調(diào)用內(nèi)部接口才能實(shí)現(xiàn)其函數(shù)功能，函數(shù)又依賴其他異步函數(shù)。則就會導(dǎo)致每個函數(shù)都變成了異步函數(shù)。如何解決這種傳染性？如下例子：

// 接口請求
        async function getList() {
            return await fetch('/list.json').then(res => res.json())
        }
        async function task1() {
            return await getList()
        }
        async function task2() {
            return await task1()
        }
        async function task3() {
            return await task2()
        }
        // 執(zhí)行task3。獲取到了getList的返回值
        console.log(task3().then(res => console.log(res)));

從這里我們可以看到，由于getList是異步的，導(dǎo)致整個調(diào)用池都變成了異步。

那么有什么辦法能讓其消除此異步形式呢？

將所有的函數(shù)改造成同步函數(shù)。然后，自定義一個fetch，將報錯攔截再繼續(xù)調(diào)用自身異步函數(shù)，如果返回正確值則就觸發(fā)其包含的下一步實(shí)現(xiàn)。

如下代碼：

function getList() {
            // 此處發(fā)送一個異步請求
            return fetch('/list.json')
        }
        function task1() {
            return getList()
        }
        function task2() {
            return task1()
        }
        function task3() {
            return task2()
        }
        /* 我們先寫一個main函數(shù)  */
        function main() {
            const task3Run = task3()
            console.log(task3Run)
        }
        function run(fn) {
            /* 判斷是否為promise函數(shù) */
            const cache = []
            let i = 0
            const _originalFetch = window.fetch
            window.fetch = (...args) => {
                /* 發(fā)送請求，且報錯 */
                /* 判斷緩存如果存在，則交付緩存 */
                if (cache[i]) {
                    if (cache[i].status == 'fulfillled') {
                        return cache[i].data
                    } else if (cache[i].status == 'rejected') {
                        throw cache[i].err
                    }
                }
                const result = {
                    status: 'pending',
                    data: null,
                    err: null
                }
                cache[i++] = result
                const prom = _originalFetch(...args)
                    .then(res => res.json())
                    .then((resolve)=> {
                        result.status = 'fulfillled'
                        result.data = resolve
                    }, (inject) => {
                        result.status = 'rejected'
                        result.err = inject
                    })
                // 報錯
                throw prom
            }
            try {
                fn()
            } catch (err) {
                if (err instanceof Promise) {
                    const reRun = () => {
                        i = 0;
                        fn()
                    }
                    err.then(reRun, reRun)
                }
            }
        }
        run(main)

以上就是以fetch為例詳解如何消除js異步的傳染性的詳細(xì)內(nèi)容，更多關(guān)于fetch消除js異步傳染性的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: