Vue全局错误提示的一点思考

我在写代码的时候，很讨厌写异常路径的各种解决办法，最好的一直都是走happy path。
在写Vue的时候，网络请求部分往往需要处理成功部分，失败部分，不管成功还是失败都要执行的部分。js有关键字async和await，可以解决部分异步回调的问题，当然也就无法像之前xx.then().catch().finally()这样写了。如果报了异常，该如何解决了？在RESTful大行其道的时代，每次都得判断错误码，然后分别处理，这是很烦的一个事情。由于某些特殊原因，会保证http响应码是200，而后端往往封装了一个类似的响应。借鉴RESTful的一些思想，比如这样一个类

import lombok.AllArgsConstructor;
import lombok.Getter;
import lombok.NoArgsConstructor;
import lombok.Setter;

/**
 * 所有前后端分类的请求，返回这个包装类
 */
@AllArgsConstructor
@NoArgsConstructor
@Getter
@Setter
public class Response<T> extends BaseObject{
    /**
     * 自定义响应码
     */
    private Integer code;
    /**
     * 响应数据
     */
    private T data;
    /**
     * 正常情况下，对没有响应数据的情况一个解释
     * 出错情况下，前端显示文案
     */
    private String msg;

    private static final Integer OK = 200;
    private static final Integer BAD_REQUEST = 400;

    public static Response success(){
        return new Response(OK, null, null);
    }
    public static Response success(Object data){
        return new Response(OK, data, null);
    }

    public static Response success(Object data, String msg){
        return new Response(OK, data, msg);
    }

    public static Response fail(String msg) {
        return new Response(BAD_REQUEST, null, msg);
    }

}

在前端写代码的时候，非常容易写出

if (res.data.code === 200) {
const data = res.data.data
// xxx
}
// 省略其他情况判断

如果在业务代码中充满这样的代码，无疑是非常痛苦的。写的时候还行，copycopy，Review的时候就发现重复的东西非常多，在一般的错误，如果后端把文案写好，很可能就是一个简单的提示，如

this.$Message.error(res.data.msg)

前后端的交互一般通过http请求，一般情况下，都不会把请求url直接写在Vue组件内，都会封装成一个方法，以iview-admin为例，类似如下

user.js文件

export const login = (data) => {
  return axios.request({
    url: 'auth/login',
    data,
    method: 'post'
  })
}

先不讨论登录怎么RESTful去写，全当咱用的也是伪RESTful，然后魔改的方式使用。
然后在登录界面中使用
login.vue

import userAPI from '@/api/user'
// 省略其他
async handleLogin(){
const data = // 从某些地方拼凑出登录需要的data
const res = await userAPI.login(data)
// 如果是成功的话
if (res.data.code === 200) {
// 登录成功
// 拿token什么的
const token  = res.data.data.token
}
if (res.data.code === 400){
// 登录失败
// 提示错误什么的
}
}

其实写了这么多，我觉得代码就写了两行

const res = await userAPI.login(data)
const token = res.data.data.token

什么错误处理，太难受了
如果能让我直接处理数据就好了，比如

const token = await userAPI.login(data)

就这样一句解决，如果出了错误，应该是在专门的，统一的一个地方去弄。
于是乎，好像是一个很不错的东西
在iview-admin中封装了一个请求类，可以在拦截器中做点手脚

axios.js

import axios from 'axios'
import store from '@/store'
// import { Spin } from 'iview'
const addErrorLog = errorInfo => {
  const { statusText, status, request: { responseURL } } = errorInfo
  let info = {
    type: 'ajax',
    code: status,
    mes: statusText,
    url: responseURL
  }
  if (!responseURL.includes('save_error_logger')) store.dispatch('addErrorLog', info)
}

class HttpRequest {
  constructor (baseUrl = baseURL) {
    this.baseUrl = baseUrl
    this.queue = {}
  }
  getInsideConfig () {
    const config = {
      baseURL: this.baseUrl,
      headers: {
        //
      }
    }
    return config
  }
  destroy (url) {
    delete this.queue[url]
    if (!Object.keys(this.queue).length) {
      // Spin.hide()
    }
  }
  interceptors (instance, url) {
    // 请求拦截
    instance.interceptors.request.use(config => {
      // 添加全局的loading...
      if (!Object.keys(this.queue).length) {
        // Spin.show() // 不建议开启，因为界面不友好
      }
      this.queue[url] = true
      return config
    }, error => {
      return Promise.reject(error)
    })
    // 响应拦截
    instance.interceptors.response.use(res => {
      this.destroy(url)
      const { data, status } = res
      return { data, status }
    }, error => {
      this.destroy(url)
      let errorInfo = error.response
      if (!errorInfo) {
        const { request: { statusText, status }, config } = JSON.parse(JSON.stringify(error))
        errorInfo = {
          statusText,
          status,
          request: { responseURL: config.url }
        }
      }
      addErrorLog(errorInfo)
      return Promise.reject(error)
    })
  }
  request (options) {
    const instance = axios.create()
    options = Object.assign(this.getInsideConfig(), options)
    this.interceptors(instance, options.url)
    return instance(options)
  }
}
export default HttpRequest

在响应的拦截器中加的东西，去判code

    // 响应拦截
    instance.interceptors.response.use(res => {
      this.destroy(url)
      const {data, status, headers} = res
      if (status === 200) {
        if (data.code === 200) {
          return data.data
        } else {
        }
      } else {
      }

    }, error => {
      this.destroy(url)
    })

这样倒是能够直接拿到我需要的数据，本身真实的数据就是封装了，现在只不过是拆开封装。
要是出了错怎么办？
在百度一番后，发现了两篇文章
Vue实战（五）网络层拦截器与全局异常信息展示
 Vuex如何做通用的全局错误信息?
发现利用vuex的一些特性加上watch是一个比较好的做法
写一个存放错误的store
error.js

export default {
  state: {
    flag: false,
    msg: ''
  },
  mutations: {
    changeFlag(state, msg) {
      state.msg = msg
      state.flag = !state.flag
    },
  },
  getters: {
    errorFlag: state =>  state.flag,
    errorMsg: state => state.msg
  },
  actions: {
    changeFlag({commit, rootState}, msg) {
      commit('changeFlag', msg)
    }
  }
}

这里有一个flag，仅仅是用来让别人watch的
然后在app.vue中监听flag变化，只要flag一变化，立马显示错误信息

    computed: {
      ...mapGetters([
        'errorFlag',
        'errorMsg'
        ]
      )
    },
    watch: {
      errorFlag (nv, ov) {
        this.$Message.error(this.errorMsg)
      }
    },

最后axios拦截器配合一下

      const {data, status, headers} = res
      if (status === 200) {
        if (data.code === 200) {
          return data.data
        } else {
          store.dispatch('changeFlag', data.msg)
        }
      } else {
        store.dispatch('changeFlag', `网络错误: ${status}`)
      }

这样就可以全局提示，而不会影响到业务代码的happy path。
最后这样做的问题
任何一个新的改变都会在带来好处的同时，带来一些麻烦，这样做了，引入什么新的问题呢？下次再写吧！
未完待续…
loading

Vue全局错误提示的一点思考

猜你喜欢