promise 中的錯誤處理

js 中的錯誤處理.

 

分為三塊吧.

第一:普通的js中 錯誤處理.

第二: promise 中的錯誤處理

第三: async 中的錯誤處理

 

第一: 普通的js 的錯誤處理 

 說普通是因為比較簡單,算一個知識點沒有太多啥說的,大家找找資料比較齊全

 

https://www.sitepoint.com/exceptional-exception-handling-in-javascript/

 

try{

 

    ...    //異常的拋出}

 

catch(e){

 

    ...    //異常的捕獲與處理}

 

finally{

 

    ...    //結束處理}

 

第二: promise 中的錯誤處理

在promise 中處理錯誤,我們通常也是去try catch,但是 只能catch 到同步的錯誤,如果是異步的,比如我們settimeout一下其實是catch不到的.來個栗子:

 

var promise = new Promise(function(resolve, reject){

 

    setTimeout(function(){

 

        throw new Error('test')

 

    }, 0)

 

    resolve('ok'); //輸出

 

});

 

promise

 

    .then(function(value){ console.log(value) })

 

    .catch(()=> console.log('err'))

 

 

 

 

栗子

可以看到,只輸出了ok,然后瀏覽器捕獲的錯誤,catch並沒有拿到.

 

然后看看我們使用reject 來拋出錯誤

 

 

 

reject

可以看到,reject 會不停的返回到下一個,但是並不會被catch 到.如果我們試試throw 一個error呢?

 

throw error

通過一層層throw 在catch 里面我們是可以拿到的,疑問來來, 如果是通過 異步promise 里面reject 能catch 到么?

 

 

 

異步

依然是可以拿到的.

 

好啦最后總結一下吧.在promise 中, 如果使用reject 錯誤,必須要再每個then函數中throw 出去,不然在catch中無法拿到.其實我們不需要再次的throw ,在promise 正常catch 就好,比如在上面的異步中我們reject一下在最后就能catch到. 需要注意的一點就是:promise 中的錯誤是不會影響外層的運行,window.onerror 也是無法檢測到的.

 

 

 

第三: async 中的錯誤處理

 

async用起來確實方便很多,promise 導致整段代碼都是promise 的then ,如果判斷太多導致代碼邏輯復雜難以維護,而且每個then 都有自己的作用域,如果要貢獻數據 通常要在外層新建一個.

 

直接貼代碼吧,看看async 正常處理異步的方式

 

const f = () => {

 

  return new Promise((resolve, reject) => {

 

    setTimeout(() => {

 

      reject(234);

 

    }, 2000);

 

  });

 

};

 

const testAsync = () => {

 

  try {

 

    const t = await f();

 

    console.log(t);

 

  } catch (err) {

 

    console.log(err);

 

  }

 

};

 

testAsync();

 

 

可以看到,可以使用同步的方式來處理error,但是如果判斷很多,多個異步又會導致到處都是判斷和try catch.因此國外的大神Dima Grossman給出了一個解決方案.直接貼官方的傳送門!

 

https://github.com/scopsy/await-to-js

 

 下面這個鏈接是一位大佬對await to js 使用中的改進.很值得一看,對優化自己的代碼和流程很又幫助.

https://segmentfault.com/a/1190000011802045