小程序中怎么優(yōu)雅的捕捉異步方法的異常

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

傳統(tǒng)方法

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

try catch

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

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

Promise.catch()

async func(){
     //do something
}

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

Promise對象內(nèi)部了try catch ,我們可以使用鏈?zhǔn)秸{(diào)用的方法來處理異常。相比try catch，Promise.catch() 寫起來當(dāng)然是爽很多的，看著也比較優(yōu)雅了。

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

async func(){
     //do something
}

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

優(yōu)雅方式

await-to-js github鏈接

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

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

import to from 'await-to-js';

async func(){
     //do something
}

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

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

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

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包并不方便，因此我們可以直接將源碼拿出來單獨(dú)使用，再加以改造的話就可以優(yōu)雅的進(jìn)行異步編程啦，我自己的改造方式如下。

// 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() 的方式獲取到異步方法執(zhí)行時(shí)對應(yīng)的頁面路由，在將第二個參數(shù)改為自己對異步方法的一個描述，每一次調(diào)用異步方法的時(shí)候就會在 控制臺輸出執(zhí)行時(shí)間。 實(shí)際使用的例子如下：

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

控制臺打印的執(zhí)行時(shí)間輸出如下,打印格式是

【路由頁面】---【方法描述】：執(zhí)行時(shí)間

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