小程序中怎么優雅的捕捉異步方法的異常

小編給大家分享一下小程序中怎么優雅的捕捉異步方法的異常，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

傳統方法

在ES7之后，我們往往使用 async await 語法來進行異步編程，如果我們要捕捉異常的話一般有以下兩種方式

try catch

async func(){
     //do something
}
try {
    const res = await func()
} catch (error) {
    //handle error
}

首先是 try catch 捕捉異常，使用 try catch 確實可以很方便的去處理異常，也可以阻止后面方法的進行，但是在開發的過程中咱們常常不止一個異步方法，大量使用 try catch 不僅寫的不爽，也絕對算不上優雅。

Promise.catch()

async func(){
     //do something
}

const res = await func().catch(error=>{
    //handle error
})

Promise對象內部了try catch ,我們可以使用鏈式調用的方法來處理異常。相比try catch，Promise.catch() 寫起來當然是爽很多的，看著也比較優雅了。

但是當我們想要在捕捉到錯誤后停止方法的繼續執行，那么 Promise.catch() 就沒辦法做到了，如下例子

async func(){
     //do something
}

const res = await func().catch(error=>{
    // 即使return也無效
    return
})
// 如果有錯誤的話我就不執行了

優雅方式

await-to-js github鏈接

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

await-to-js 這個庫應該很多人了解過了，它是一個異步請求的包裝器，可以用于處理異步請求的錯誤，根據我們上面的需求改造為使用 await-to-js 的例子如下

import to from 'await-to-js';

async func(){
     //do something
}

const [err,res] = await to(func())
if(err){
    //handle error
    return
}
// 如果有錯誤的話我就不執行了

通過將我們的異步方法作為 to() 方法的參數，返回值通過一個數組解構獲取，數組第一個值為捕捉到的錯誤，第二個值為正常執行的返回值。

await-to-js的實現原理也非常簡單，就是使用 Promise.catch()獲取到異常后再將結果返回在一個數組中， 源代碼如下

export function to<T, U = Error> (
	promise: Promise<T>,
	errorExt?: object
  ): Promise<[U, undefined] | [null, T]> {
	return promise
	  .then<[null, T]>((data: T) => [null, data])
	  .catch<[U, undefined]>((err: U) => {
		if (errorExt) {
		  const parsedError = Object.assign({}, err, errorExt);
		  return [parsedError, undefined];
		}
  
		return [err, undefined];
	  });
  }
  
  export default to;

小程序中使用

在小程序中，我們使用npm包并不方便，因此我們可以直接將源碼拿出來單獨使用，再加以改造的話就可以優雅的進行異步編程啦，我自己的改造方式如下。

// lib/awaitTo.js
module.exports = function to(promise, description="unknown") {
	const pages = getCurrentPages()
	const route = pages[pages.length - 1].route||'unknown'
	description = `[${route}]---[${description}]`
	console.time(description)
	return promise
		.then(function (data) {
			console.timeEnd(description)
			return [null, data];
		})
		.catch(function (err) {
			wx.showToast({
				title: '請求失敗',
				icon: "none"
			})
			return [err, undefined];
		});
}

我通過 getCurrentPages() 的方式獲取到異步方法執行時對應的頁面路由，在將第二個參數改為自己對異步方法的一個描述，每一次調用異步方法的時候就會在 控制臺輸出執行時間。 實際使用的例子如下：

const to = require("../../lib/awaitTo")
const [err, res] = await to(db.collection("post").add({
        data: form
}),"addPost")
if (err) {
        // 處理我的錯誤
        return
}
// 成功后執行的邏輯

控制臺打印的執行時間輸出如下,打印格式是

【路由頁面】---【方法描述】：執行時間

以上是“小程序中怎么優雅的捕捉異步方法的異常”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！