小程序中怎么优雅的捕捉异步方法的异常

小编给大家分享一下小程序中怎么优雅的捕捉异步方法的异常，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

网站建设哪家好，找创新互联公司！专注于网页设计、网站建设、微信开发、小程序制作、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了金乡免费建站欢迎大家使用！

传统方法

在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 (
	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包并不方便，因此我们可以直接将源码拿出来单独使用，再加以改造的话就可以优雅的进行异步编程啦，我自己的改造方式如下。

// 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
}
// 成功后执行的逻辑

控制台打印的执行时间输出如下,打印格式是

【路由页面】---【方法描述】：执行时间

以上是“小程序中怎么优雅的捕捉异步方法的异常”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

分享文章：小程序中怎么优雅的捕捉异步方法的异常
网站URL：http://kswsj.cn/article/gdpegj.html

关于创新互联

小程序中怎么优雅的捕捉异步方法的异常

传统方法

优雅方式

小程序中使用

其他资讯