一、前言

我們在寫js的時候，經(jīng)常的會遇到需要異步去請求接口，或者通過setTimeout或Promise去做什么事， 然后讓同步進(jìn)程繼續(xù)向下走， 當(dāng)?shù)侥硞€時間節(jié)點的時候或者數(shù)據(jù)請求成功的時候在通過eventloop的方式回調(diào)執(zhí)行。這本身是js的特點和優(yōu)勢。

但是，異步隊列執(zhí)行也存在錯誤的情況，這時，對于怎么進(jìn)行錯誤處理，就成了我們的重點。

想一下項目中用到的方式，或者jquery的ajax方式，一般都會有catch、fail之類的回調(diào)方法供我們對錯誤結(jié)果進(jìn)行處理。 那么現(xiàn)在討論的話題是能不能使用try catch進(jìn)行處理。

為什么寫這篇文章？ 是因為我在寫JavaScript 的setTimeout與事件循環(huán)機(jī)制event-loop的時候，舉例express的異步錯誤獲取的時候，想到了這個點，我覺得有必要單獨拿出來，寫一篇斷篇幅的，又能夠清晰明了表達(dá)的一篇文章。于是這篇文章便生成了。

好了， 正文開始。

二、主要講的異步隊列方法

2.1 setTimeout

這里的setTimeout指的是一類，包括 setTimeout, setInterval這類所謂宏任務(wù)。 他們可以用try catch來捕獲錯誤么?

2.1.1 問題表現(xiàn)

    try{
        setTimeout(() => {
            let a = c;
        }, 100)
    } catch(e) {
        console.log('能獲取到錯誤么？？', e);
    }

結(jié)果是不能獲取到，程序直接報錯了， 那么出現(xiàn)的后果可能就是整個頁面掛了，或者在node中，整個服務(wù)掛了。 我們的初心是想讓程序更加健壯，但卻做了無用功。

那么我們在想，既然在setTimeout 外邊無法獲取，那么能不能在setTimeout里面先用try catch獲取一下，然后捕獲到錯誤后再傳出去呢？ 想到就干，繼續(xù)分析：

    try{
        setTimeout(() => {
            try {
                let a = c;
            } catch(e) {
                throw new Error('some variable is not defined');
            }
        }, 100)
    } catch(e) {
        console.log('能獲取到錯誤么？？', e);
    }

很抱歉，想法很好，但是也不行。外邊也catch不到。

2.1.2 問題原因

好了，我們把這個疑問分析一下吧。其實，這里的根本原因還是剛開始提到的事件循環(huán)。 事件循環(huán)不是空空的一句表述、一個概念，而是在代碼中實實在在存在的。

具體事件循環(huán)的相關(guān)知識，可以看下我很早前寫的JavaScript 的setTimeout與事件循環(huán)機(jī)制event-loop 文章。

回到這個例子中， 最外層的try catch是在一個task中，我們定義它為我們js文件的同步主任務(wù)，從上到下執(zhí)行到這里了， 然后，會把里面的setTimeout推到一個任務(wù)隊列中， 這個隊列是存儲在內(nèi)存中的，由V8來管理。然后主task就繼續(xù)向下執(zhí)行， 一直到結(jié)束。

當(dāng)該setTimeout時間到了，且沒有其它的task執(zhí)行了， 那么，就將這個setTimeout的代碼推入執(zhí)行棧開始執(zhí)行。 當(dāng)執(zhí)行到錯誤代碼的時候，也就是這個 let a = c, 因為c未定義，所以就會報錯。

但問題的本質(zhì)是，這個錯誤跟最外層的try catch并不在一個執(zhí)行棧中，當(dāng)里面執(zhí)行的時候，外邊的這個task早已執(zhí)行完， 他們的context(上下文)已經(jīng)完全不同了。

所以，頁面會直接報錯，甚至程序崩潰。

2.2 Promise

我們知道，Promise 也是一個異步的處理過程，它對應(yīng)事件循環(huán)中的微任務(wù)。 那么這里其實與上面的setTimeout存在同樣的問題。

舉個例子：

    try {
        new Promise((resolve, reject) => {
            reject('promise error');
        })
    } catch(e) {
        console.log('異步錯誤，能catch到么？？', e);
    }

相信大家能夠推導(dǎo)出結(jié)果了： 也catch不到

原因其實與上面的setTimeout是一樣的，執(zhí)行棧上下文已經(jīng)不同了。

那么針對Promise，ECMA官方已經(jīng)給我們提供了一個方法，那就是 catch， 通過catch我們獲取到錯誤，可以阻止程序崩潰。 但是喜歡發(fā)散思維的你可能會想到， 那我用catch接到了，是不是就可以讓外層的catch獲取到了呢？ 想到就試一下

    try {
        new Promise((resolve, reject) => {
            reject('promise error');
        }).catch(e => {
            throw new Error(e);
        })
    } catch(e) {
        console.log('異步錯誤，能catch到么？？', e);
    }

結(jié)果就是 不行。相信大家通過我詳細(xì)的例子和思維脈絡(luò)，對這塊已經(jīng)真正掌握了吧？

2.3 callback

那么通過上面的，大家可能會有一種想法，只要是callback，就是catch不住的。 其實這種想法是錯誤的，我通過一個例子來證明。

    function Fn(cb) {
        console.log('callback執(zhí)行了');
        cb();
    }

    try {
        const cb = () => {
            throw new Error('callback執(zhí)行錯誤');
        }
        Fn(cb);
    } catch(e) {
        console.log('能夠catch住么???')
    }

其實這里就是個煙霧彈， 考驗大家對這個事件循環(huán)相關(guān)機(jī)制是不是明白了。

2.4 Async await

現(xiàn)在的項目中，大家越來越愿意使用Async await 這對 es7標(biāo)準(zhǔn)里的api了。 因為它們這對組合是在是太好用了。 那么通過異步等待的方式，用try catch能夠行么?

那么咱們使用一個例子驗證一下：

const asyncFn = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('asyncFn執(zhí)行時出現(xiàn)錯誤了')
        }, 100);
    })
}
const executedFn = async () => {
    try{
        await asyncFn();
    }catch(e) {
        console.log('攔截到錯誤..', e);
    }
}

如果執(zhí)行一下，就發(fā)現(xiàn)： catch到了!

asyncFn里面是有 Promise的，為什么外邊就能catch到了呢？ 是不是跟上面講的矛盾了呢？ 其實并沒有。 看我分析一下：

async-await 是使用生成器、promise 和協(xié)程實現(xiàn)的,wait操作符還存儲返回事件循環(huán)之前的執(zhí)行上下文，以便允許promise操作繼續(xù)進(jìn)行。當(dāng)內(nèi)部通知解決等待的承諾時，它會在繼續(xù)之前恢復(fù)執(zhí)行上下文。 所以說，能夠回到最外層的上下文， 那就可以用try catch 啦。

到此這篇關(guān)于JavaScript異步隊列進(jìn)行try catch時的問題解決的文章就介紹到這了,更多相關(guān)JS try catch內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論