一、前言

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

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

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

為什么寫這篇文章？ 是因?yàn)槲以趯?a href="http://chabaoo.cn/article/254237.htm" target="_blank">JavaScript 的setTimeout與事件循環(huán)機(jī)制event-loop的時(shí)候，舉例express的異步錯(cuò)誤獲取的時(shí)候，想到了這個(gè)點(diǎn)，我覺得有必要單獨(dú)拿出來，寫一篇斷篇幅的，又能夠清晰明了表達(dá)的一篇文章。于是這篇文章便生成了。

好了， 正文開始。

二、主要講的異步隊(duì)列方法

2.1 setTimeout

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

2.1.1 問題表現(xiàn)

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

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

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

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

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

2.1.2 問題原因

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

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

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

當(dāng)該setTimeout時(shí)間到了，且沒有其它的task執(zhí)行了， 那么，就將這個(gè)setTimeout的代碼推入執(zhí)行棧開始執(zhí)行。 當(dāng)執(zhí)行到錯(cuò)誤代碼的時(shí)候，也就是這個(gè) let a = c, 因?yàn)閏未定義，所以就會(huì)報(bào)錯(cuò)。

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

所以，頁面會(huì)直接報(bào)錯(cuò)，甚至程序崩潰。

2.2 Promise

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

舉個(gè)例子：

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

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

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

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

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

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

2.3 callback

那么通過上面的，大家可能會(huì)有一種想法，只要是callback，就是catch不住的。 其實(shí)這種想法是錯(cuò)誤的，我通過一個(gè)例子來證明。

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

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

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

2.4 Async await

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

那么咱們使用一個(gè)例子驗(yàn)證一下：

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

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

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

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

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

最新評(píng)論