Package Exports

no-catch-loader
no-catch-loader/src/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (no-catch-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

no-catch-loader

它是一个 webpack 的 loader ,帮助你在使用 async-await进行异步编程时自动添加catch和finally语句块。提供一种全局捕获异步错误的方式，可用于 JS 错误统一处理、上报；也可实现自定义的错误处理。

Getting Started

To begin, you'll need to install no-catch-loader:

npm install --save-dev no-catch-loader

yarn add -D no-catch-loader

pnpm add -D no-catch-loader

Then add the plugin to your webpack config. For example:

Example

vue.config1.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: "no-catch-loader",
            // 没有特殊要求可不配置
            options: {},
          },
        ],
      },
    ],
  },
}

demo.js

async defaultTest() {
  // getFn是一个不存在的函数
  await getFu()
},

经过loader转换后的代码如下：

async defaultTest() {
  try {
      // getFn是一个不存在的函数
      await getFu();
  } catch (error) {
      console.log(error);
  }
},

vue.config2.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: "no-catch-loader",
            // 没有特殊要求可不配置
            options: {
              catchCode: (identifier) => `
                // catchFn 是用户可以自定义的函数。可实现局部自定义错误捕获
                if(catchFn) {
                  catchFn()
                }else {
                  // 可使用函数作用域内的一些方法
                  this.$message('catch');
                  console.log(${identifier})
                }
              `,
              identifier: "e",
              finallyCode: `
                console.log("finally")  
              `,
            },
          },
        ],
      },
    ],
  },
}

demo.js

async defaultTest() {
  // getFn是一个不存在的函数
  await getFu()
},

经过loader转换后的代码如下

async defaultTest() {
  try {
      // getFn是一个不存在的函数
      await getFu();
  } catch (e) {
      if (catchFn) {
          catchFn();
      } else {
          this.$message('catch');
          console.log(e);
      }
  } finally {
      console.log("finally");
  }
}

Options

选项	类型	默认值	可选值	描述
catchCode	Function	(identifier) => `console.log(${identifier})`	无	需要添加的 catch 执行函数，更改模板字符串的内容即可，模板内容为可执行的 JS 语句
identifier	String	error	无	catch 语句块中参数变量标识符
finallyCode	String	无	无	模板字符串，内容是可执行的 JS 语句