await 错误捕获实现方式源码解析

 更新时间:2022年12月25日 11:50:19   作者:codeniu  
这篇文章主要为大家介绍了await 错误捕获实现方式源码示例解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

前言

Promise 是一种在 JavaScript 中用于处理异步操作的机制。Promise 在开发中被广泛使用,这篇文章将学习如何优雅的捕获 await 的错误。

资源:

Promise 的使用方法

  • 创建一个 Promise 实例。这通常是通过调用 Promise 构造函数来完成的,并将一个函数作为参数传递给构造函数,该函数接收两个参数:resolve 和 reject。resolve 和 reject 分别用于处理 Promise 的成功和失败结果。
  • 在函数体内执行异步操作。当异步操作完成时,如果执行成功,则调用 resolve 函数来将 Promise 的状态变为“已完成”,并将结果作为参数传递给 resolve 函数;如果执行失败,则调用 reject 函数将 Promise 的状态变为“已拒绝”,并将失败的原因作为参数传递给 reject 函数。
  • 使用 then 方法来处理 Promise 的成功和失败结果。then 方法接收两个参数:一个处理成功结果的函数和一个处理失败结果的函数。在 Promise 状态变为“已完成”或“已拒绝”后,then 方法会自动执行相应的处理函数。

示例代码如下:

const myPromise = new Promise(function(resolve, reject) {
  // 执行异步操作
  setTimeout(function() {
    // 异步操作成功
    resolve('Success');
  }, 1000);
});
// 处理 Promise 的成功和失败结果
myPromise.then(function(result) {
  // 处理成功结果
  console.log(result);
}).catch(function(err){
  // 处理失败
  console.log(err)
})

异步函数正在等待 Promise,因此当 promise 遇到错误时,它会抛出一个异常,该异常将在 promise 的 catch 方法中捕获。

其他处理错误的方式:

try{
    const res = await myPromise()
}catch(e){
    console.log(e)
}

当代码中有大量的异步操作时,就需要有很多的try/catch 块,代码看起来就很臃肿,那么有什么更好的处理这些错误的办法呢?

await-to-js

await-to-js

这个项目的 slogan 是:

Async await wrapper for easy error handling

异步等待包装,方便错误处理

用法:

import to from 'await-to-js';
[ err, user ] = await to(UserModel.findById(1));
if(!user) return cb('No user found');

to 函数接收一个 Promise,然后将成功响应解析为数组,并将返回数据作为第二项。从捕获中收到的错误作为第二项。

源码

/**
 * @param { Promise } promise
 * @param { Object= } errorExt - Additional Information you can pass to the err object
 * @return { Promise }
 */
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;

接收一个 Promise 实例和一个可选的 errorExt 对象作为参数。该函数返回一个新的 Promise。

原理是使用 then 方法处理 Promise 的成功结果,并使用 catch 方法处理 Promise 的失败结果。如果 Promise 执行成功,则会将结果包装成一个包含两个元素的数组并作为新的 Promise 的成功结果返回;如果 Promise 执行失败,则会将错误对象包装成一个包含两个元素的数组并作为新的 Promise 的失败结果返回。

总结

使用await-to-js,得以一行代码完成对异步代码错误的捕获,阅读文章得知,await-to-js 是作者通过goLang启发得来的灵感。更加说明了融会贯通,学以致用的重要性。

以上就是await 错误捕获实现方式源码解析的详细内容,更多关于await 错误捕获的资料请关注脚本之家其它相关文章!

相关文章

  • JS前端监控采集用户行为的N种姿势

    JS前端监控采集用户行为的N种姿势

    这篇文章主要为大家介绍了JS前端监控采集用户行为的N种姿势,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • '2'>'10'==true?解析JS如何进行隐式类型转换

    '2'>'10'==true?解析JS如何进行隐式类型转换

    这篇文章主要为大家介绍了'2'>'10'==true?解析JS如何进行隐式类型转换示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • JavaScript数组去重方案

    JavaScript数组去重方案

    这篇文章主要介绍了JS数组方案,先总结一下我们数组的方法:pop、push、shift、unshift、slice、splice、sort、reverse、concat、join、indexOf、lastIndexOf、map、forEach,下面文章将详细对他们做个详细介绍,需要的朋友可以参考一下
    2021-09-09
  • 微信小程序 页面跳转传递值几种方法详解

    微信小程序 页面跳转传递值几种方法详解

    这篇文章主要介绍了微信小程序 页面跳转传递值几种方法详解的相关资料,需要的朋友可以参考下
    2017-01-01
  • JS算法题解搜索插入位置方法示例

    JS算法题解搜索插入位置方法示例

    这篇文章主要为大家介绍了JS算法题解搜索插入位置方法示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-07-07
  • 微信小程序 加载 app-service.js 错误解决方法

    微信小程序 加载 app-service.js 错误解决方法

    这篇文章主要介绍了微信小程序 加载 app-service.js 错误详解的相关资料,在开发微信小程序过程中出现了app-services.js的错误,并解决此问题,需要的朋友可以参考下
    2016-10-10
  • JS前端使用canvas动态绘制函数曲线示例详解

    JS前端使用canvas动态绘制函数曲线示例详解

    这篇文章主要为大家介绍了JS前端使用canvas画函数曲线的示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • WebWorker 封装 JavaScript 沙箱详情

    WebWorker 封装 JavaScript 沙箱详情

    这篇文章主要介绍了WebWorker 封装 JavaScript 沙箱,在前文 quickjs 封装 JavaScript 沙箱详情 已经基于 quickjs 实现了一个沙箱,今天这篇文章再基于 web worker 实现备用方案,需要的朋友可以参考一下
    2021-10-10
  • 总结JavaScript中BigIn函数常见的属性

    总结JavaScript中BigIn函数常见的属性

    本文基于JavaScript基础,介绍了 BigInt 函数,常见的属性,通过 BigInt 函数进行数字运算符的比较。布尔运算等等,通过按案例的分析进行详细的讲解,需要的朋友可以参考一下
    2021-10-10
  • 本地存储localStorage设置过期时间示例详解

    本地存储localStorage设置过期时间示例详解

    这篇文章主要为大家介绍了本地存储localStorage设置过期时间示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-01-01

最新评论