Skip to content

Ajax错误信息提示

数据请求时,对于错误提示信息,建议应该在页面中统一调用这些请求数据子函数的地方进行提示,不应该在每一个子函数中进行错误信息提示

代码示例:

  • TODO:页面在进行初始化时,分别调用了getReportInfo、getPageData、getReportSetting三个函数来获取页面数据,子函数如果执行报错,比如请求数据报错,应该将错误信息统一抛出,由调用这些子函数的大函数来统一进行错误提示
  • TODO:子函数将错误抛出
  • TODO:如果err.msg为空,则需要提示一个自定义的错误信息
vue
<!-- 部门-编制并上报财务报告 -->
<template>
  <!-- 容器 -->
  <div class="gfr-base-report" :key="unique" v-if="pageVisible">
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import { GET_LOGIN_INFO } from '@/store/login';
import util from '@/assets/js/util';
import fetch from '@/config/fetch';
import { getViewParams } from '@/mixin/system';
import { REPORT_TYPE } from '@/modules/gfr/common/constant';

export default {
  name: 'GFR_BASE_REPORT',
  data() {
    return {
      unique: '', //页面key,用于刷新页面用
      queryParams: '', //URL携带的参数
      contextInfo: {}, //页面上下文数据(保存导航页跳转时的参数)
      reportInfo: {
        attachment: {
          attachId: '',
          fileName: '',
        },
        submitStatus: '', //上报状态  2未上报、0已上报、1已退回
        returnCreateUser: '', //审核人
        returnTime: '', //审核时间
        returnCause: '', //上报退回原因
      }, //报告状态信息
      pageData: {
        template: [], //模板数据
        report: {}, //财务报告数据
        attachment: [], //附件数据
      }, //页面数据
      reportSetting: {}, //财报控制规则
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.init();
    });
  },
  methods: {
    /**
     * 初始化
     * 1、重置页面数据
     * 2、设置上下文信息
     * 3、获取报告信息、获取页面数据
     */
    async init() {
      try {
        if (this.queryParams !== this.$route.query.query) {
          await this.resetData();
          this.queryParams = this.$route.query.query;
          let contextInfo = getViewParams(this.queryParams);
          this.$set(this.$data, 'contextInfo', util.freezeDeep(contextInfo));
          // TODO:页面在进行初始化时,分别调用了getReportInfo、getPageData、getReportSetting三个函数来获取页面数据,子函数如果执行报错,比如请求数据报错,应该将错误信息统一抛出,由调用这些子函数的大函数来统一进行错误提示
          await Promise.all([this.getReportInfo(), this.getPageData(), this.getReportSetting()]);
          this.unique = util.generateShortId(true);
        }
      } catch (err) {
        console.error(err);
        // TODO:如果err.msg为空,则需要提示一个自定义的错误信息
        this.$message({
          type: 'error',
          message: err.msg || '页面初始化错误!',
        });
      }
    },
    /**
     * 获取财报控制规则
     */
    getReportSetting(){
      return new Promise((resolve, reject) => {
        fetch.post('/gfr/v1/report/rule/setting/selectRule', {
          fiscalYear: this.contextInfo.setYear,
          reportCode: 'GFR_REPORT_RULE',
        }).then(({data}) => {
          this.$set(this.$data, 'reportSetting', data);
          return resolve();
        // TODO:子函数将错误抛出
        }).catch(reject);
      });
    },
    /**
     * 重置页面数据
     */
    async resetData() {
      try {
        this.unique = '';
        this.$set(this.$data, 'contextInfo', {});
        this.reportInfo.submitStatus = '';
        this.reportInfo.returnCreateUser = '';
        this.reportInfo.returnTime = '';
        this.reportInfo.cause = '';
        this.pageData.template = [];
        this.pageData.report = [];
        this.pageData.attachment = [];
        await this.$nextTick();
      } catch (err) {
        return Promise.reject(err);
      }
    },
    /**
     * 获取报告状态信息
     */
    getReportInfo() {
      return new Promise((resolve, reject) => {
        let { dwCode, dwType, mofDivCode, setYear } = this.contextInfo;
        fetch
          .get('/gfr/v1/main/getSubmitInfo', {
            params: {
              submitAgencyCode: dwCode,
              submitMofDivCode: mofDivCode,
              dwType,
              fiscalYear: setYear,
              submitType: REPORT_TYPE.BM, //此参数传固定值,部门、综合、行政区三个页面传的参数不同
            },
          })
          .then(({ data }) => {
            util.copyProperties(this.reportInfo, data);
            return resolve();
          })
          // TODO:子函数将错误抛出
          .catch(reject);
      });
    },
    /**
     * 获取页面数据
     */
    getPageData() {
      return new Promise((resolve, reject) => {
        let { dwCode, dwName, dwType, mofDivCode, setYear } = this.contextInfo;
        fetch
          .post('/gfr/v1/docu/queryAllGfrInfo', {
            agencyCode: dwCode,
            agencyName: dwName,
            dwType,
            mofDivCode: mofDivCode,
            fiscalYear: setYear,
            catalogueType: REPORT_TYPE.BM, //此参数传固定值,部门、综合、行政区三个页面传的参数不同
          })
          .then(({ data }) => {
            this.$set(this.pageData, 'template', data.template);
            this.$set(this.pageData, 'report', data.report);
            this.$set(this.pageData, 'attachment', data.attachment);
            return resolve();
          })
          // TODO:子函数将错误抛出
          .catch(reject);
      });
    },
  },
  computed: {
    ...mapGetters([GET_LOGIN_INFO]),
    /**
     * 页面是否显示
     */
    pageVisible() {
      return util.isNotEmpty(this.unique);
    },
  },
};
</script>
<style lang="scss" scoped>
@import '~@/assets/style/variables.scss';
.gfr-base-report {
  position: relative;
  margin-top: 5px;
  padding: 10px;
  background: $-bs-bg-white;
}
</style>