try catch 捕获异步的问题

发布于 2022-09-13 00:22:45 字数 713 浏览 11 评论 0

场景:最近在做表单验证 发现了很多的form表单验证的时候很多都是采用的异步捕获?我依稀记得try catch 是捕获同步代码的错误机制,为什么可以捕获到异步的操作;以下是截取antDesign一段伪代码
image.png

可以参考 下方的伪代码:

  const result = () => {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          reject('我是错误')
        }, 1000)
      })
    }

      async function foo () {
          try{
            const  m = await result()
          }catch(error){
            console.log(error,'9999')
          }
      };
      foo()

问题:为什么可以捕获?这其中的原理是什么?是否只要带上await 的语法糖都是用try catch 进行捕获?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

稍尽春風 2022-09-20 00:22:45

try catch 能捕获 async函数中await的异步异常,是基于类es6 generator生成器函数的调度机制。

除开async await是一些现代浏览器或者高版本node已经原生支持的不说。可以通过babel 将async await 编译成es5来透析它的ployfill实现。generator主要是两种调度类型,nextthrow generator上有一个throw就是原声的throw方法

eg. 在https://babeljs.io/repl将以下代码转换,然后自行断点调试

function mockAsyncError(){
  return new Promise((resolve,reject)=>{
    setTimeout(()=>{
        reject("一个异步error")
    },2000)
  })
}

async function test(){
  try{
    console.log(1)
    await mockAsyncError()
  }catch(e){
    console.log("e",e)
  }
   
}
test()
// 转换为generator
"use strict";

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

function mockAsyncError() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject();
    }, 2000);
  });
}

function test() {
  return _test.apply(this, arguments);
}

function _test() {
  _test = _asyncToGenerator(function* () {
    try {
      console.log(1);
      yield mockAsyncError();
    } catch (e) {
      consol.log("e", e);
    }
  });
  return _test.apply(this, arguments);
}

test();
// es5版本
"use strict";

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }

function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }

function mockAsyncError() {
  return new Promise(function (resolve, reject) {
    setTimeout(function () {
      reject();
    }, 2000);
  });
}

function test() {
  return _test.apply(this, arguments);
}

function _test() {
  _test = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
    return regeneratorRuntime.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            _context.prev = 0;
            console.log(1);
            _context.next = 4;
            return mockAsyncError();

          case 4:
            _context.next = 9;
            break;

          case 6:
            _context.prev = 6;
            _context.t0 = _context["catch"](0);
            consol.log("e", _context.t0);

          case 9:
          case "end":
            return _context.stop();
        }
      }
    }, _callee, null, [[0, 6]]);
  }));
  return _test.apply(this, arguments);
}

test();
绝情姑娘 2022-09-20 00:22:45

就是语言本身的能力啊
在async function里try await的promise,就能把promise的异常捕获了

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文