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

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專(zhuān)注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、小程序制作、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了金鄉(xiāng)免費(fèi)建站歡迎大家使用！

傳統(tǒng)方法

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

try catch

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

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

Promise.catch()

async func(){
     //do something
}

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

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

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

async func(){
     //do something
}

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

優(yōu)雅方式

await-to-js github鏈接

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

await-to-js 這個(gè)庫(kù)應(yīng)該很多人了解過(guò)了，它是一個(gè)異步請(qǐng)求的包裝器，可以用于處理異步請(qǐng)求的錯(cuò)誤，根據(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
}
// 如果有錯(cuò)誤的話我就不執(zhí)行了

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

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

export function to (
	promise: Promise,
	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包并不方便，因此我們可以直接將源碼拿出來(lái)單獨(dú)使用，再加以改造的話就可以?xún)?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: '請(qǐng)求失敗',
				icon: "none"
			})
			return [err, undefined];
		});
}

我通過(guò) getCurrentPages() 的方式獲取到異步方法執(zhí)行時(shí)對(duì)應(yīng)的頁(yè)面路由，在將第二個(gè)參數(shù)改為自己對(duì)異步方法的一個(gè)描述，每一次調(diào)用異步方法的時(shí)候就會(huì)在 控制臺(tái)輸出執(zhí)行時(shí)間。 實(shí)際使用的例子如下：

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

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

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

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