扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
小编给大家分享一下小程序中怎么优雅的捕捉异步方法的异常,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
网站建设哪家好,找创新互联公司!专注于网页设计、网站建设、微信开发、小程序制作、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了金乡免费建站欢迎大家使用!
在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 } // 成功后执行的逻辑
控制台打印的执行时间输出如下,打印格式是
【路由页面】---【方法描述】:执行时间
以上是“小程序中怎么优雅的捕捉异步方法的异常”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流