代码之家  ›  专栏  ›  技术社区  ›  atkayla

Try Catch应如何用于多个事件处理程序?

  •  3
  • atkayla  · 技术社区  · 7 年前

    假设我们有一个函数可以附加一组事件处理程序。我注意到它们周围有一个try-catch,它捕获了事件函数中的内容。应该这样做吗?

    function attachHandlers() {
        try {
            network.on('event1', async (evt) => {
                ...
            });
    
            network.on('event2', async (evt) => {
                ...
            });
        } catch (err) {
            throw err;
        }
      }
    

      function attachHandlers() {
        network.on('event1', async (evt) => {
            try {
                ...
            } catch (err) {
                throw err;
            }
        });
    
        network.on('event2', async (evt) => {
            try {
                ...
            } catch (err) {
                throw err;
            }
        });
      }
    
    1 回复  |  直到 7 年前
        1
  •  2
  •   Guillaume Georges    7 年前

    正如其他人所说,围绕侦听器附件的try/catch不会捕获在处理程序中抛出的错误。

    如果您想知道处理程序何时抛出错误,可以监听 error 上的事件 window 对象。

    如果你想抓住他们,你可以用 preventDefault errorEvent 在那个错误处理程序中。

    编辑 :由于某种原因,下面的代码片段无法“捕获”错误,最终在控制台中未被捕获。我在铬合金上测试过它,它起作用了。

    const myBtn = document.getElementById("myBtn");
    
    myBtn.addEventListener("click", function() {
      console.log("handler 1");
      throw "Error in handler1";
    
    });
    
    myBtn.addEventListener("click", function(error) {
      console.log("handler 2");
      throw "Error in handler2";
    });
    
    window.addEventListener("error", function (error) {
        error.preventDefault();
        console.error("Error caught");
        return false;
    });
    <button id="myBtn">Click</button>
    推荐文章