Vue 全局捕获后端接口抛出的error,并以提示框的形式显示

这个是比较常见的问题,但这种东西一般都在配置项里,如果不是很了解配置项的话还是不容易找到对应的位置
提示类型
在这里插入图片描述

在这里插入图片描述

首先得知道vue+axois 封装请求+拦截器的配置,然后一般全局捕获在instance.interceptors.response.use()中去做相应的处理。其中的response参数,就是每次调用接口可以触发的后台接口返回的状态码以及值

instance.interceptors.response.use(
  (response) => {
  //此处为全局捕获接口没请求成功时候得异常,response.data.error.message是后端返回的异常提示语句
    if (response.data.code != '200') {
        console.log(response.data)
        Vue.prototype.$message ({
          message:response.data.error.message,
          type: 'error'
        });
    }
    if (loadingInstance) loadingInstance.close()
    const { data, config } = response
    const { code, msg } = data
    // 操作正常Code数组
    const codeVerificationArray = isArray(successCode)
      ? [...successCode]
      : [...[successCode]]
    // 是否操作正常
    // console.log(codeVerificationArray)
    if (codeVerificationArray.includes(code)) {
      return data
    } else {
      handleCode(code, data)
      // 报错退出登录
      router.push({ path: '/login' }).catch(() => {})
      return Promise.reject(
        'vue-admin-beautiful请求异常拦截:' +
          JSON.stringify({ url: config.url, code, msg }) || 'Error'
      )
    }
  },
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐