vue中@Action的异常处理

1. 知识点：

1. 在某行代码有错误抛出后，后面的代码都不会被执行，直接阻断
2. try-catch 语句里的代码有一行有错误，后面也阻断，但是跳出 catch 语句后面的代码依然可以执行，因为抛出的错误被 catch 接到了

• 举个栗子：

 try {
    test()
    console.log('after-test');
  } catch (e) {
    console.log('catch-error', e);
  }
  console.log('after-trycatch');
  function test() {
    throw new Error()
  }

• 输出：

  
  image.png

2. 问题来源

• 测试 bug：断网时提示不正确，应该提示网络出错，但是却显示某一接口的获取失败

• 具体代码示例如下：

//页面请求接口
try {
      await this.fetchR(params)
    } catch (e) {
      if (e && e.isHandled) {
        return
      }
      this.$message.error('获取失败')
    }

//store里请求数据
 @Action({ rawError: true })
  async fetchR(
    params: params,
  ): Promise<R[]> {
    const url = api.v.r()
    const response = await axios.post(url, params)
    const { data } = response
    this.context.commit('setR', {
      type: params.type,
      data,
    })
    return data
  }

• 原因：e.isHandled为 false，也即此时 catch 住的 error 并非项目里由 axios 抛出的 requestError 类型（该类型包含 isHandled 属性）

• 打印 error：抛出两个异常，一个是ERR_ACTION_ACCESS_UNDEFINED，一个是error:无法链接或出错。其中第二个是 requestError 类型的。但是基于上面知识点 1中所说的代码里 throw error，后面的代码应该不执行的，但是却执行了 return data，从而导致 mutation 报错，说明@Action 做了一些工作。

• 分析源码： 那么页面 catch 住的是什么 error 呢，查看vuex-module-decorators中关于@Action的源码：
  

  image.png

可知：@Action 在不给 rawError 置为 true 时，会 new 一个新的 Error，并且带上 aciton 里抛出的错误，包裹到一起抛出，因此页面 catch 住的 error 是@Action 抛出的错误，打印就会看到原 error 的信息

• 查错： 查询第一个报错可参考https://github.com/championswimmer/vuex-module-decorators/issues/26

• 解决方法： 加rawError属性，@Action({rawError:true})，即暴露出原生 error。

• 走的弯路： 因为打印 error 会有原 error 也就是 requestError 类型出现，误以为页面 catch 住了两个 error，归结原因在于对知识点 1不够清晰。

3. 对当前项目的启示

需要成功获取接口数据后才更改某一状态或者某一数据值的，不应该将代码写在 trycatch 后，因为即使抛出错误，catch 后的代码也会被执行，所以对于这种代码可以写在 try 语句里，await 后。
比如：页面打 tag，需要在成功将 tag 传给后台成功后再变为选中的蓝色状态，以及做后面的操作。

参考：https://github.com/championswimmer/vuex-module-decorators/issues/26
https://github.com/championswimmer/vuex-module-decorators/blob/master/src/action.ts