Axios-request-method NPM

serviceAPI 说明文档

业务痛点：在现有多业务场景下，经常出现书写业务代码捕获后端异常的时候因为考虑不全而导致页面出现一系列的问题。基于这个痛点，对请求api进行统一封装，统一处理，减少前端冗余代码，减少前端对后端错误信息的关注度，从而更好的把精力应用于业务开发。依赖：依赖于axios 支持：内置基于sucess字段进行错误处理，如果需要更改条件，则可以更改初始化时传入的逻辑处理字段，也可自定义错误处理细节

/**
 * @param {object} baseConfig  应用基础配置
 * @param {string}  [baseConfig.baseUrl]  baseUrl，请求base，必传
 * @param {string}  [baseConfig.mockUrl] mock环境下请求baseUrl，非必传
 * @param {boolean}  [baseConfig.mock] 是否为mock环境，非必传
 * @param {boolean}  [baseConfig.local] 是否为本地，非必传
 * @param {number}  [baseConfig.timeout] 超时时间，默认5s，非必传
 * @param {function}  [baseConfig.errorHandler]  默认错误处理逻辑，非必传（优先级4）
 * @param {function}  [baseConfig.customizeCallback]  默认数据处理逻辑（优先级2），非必传(第一个参数为响应体，第二个为successCallback, 第三个为failCallbackaa)
 * @param {boolean}  [baseConfig.mixin]  是否需要全局混入方法 非必传
 * @param {object}  [baseConfig.headers] // 默认请求头  非必传
 * @return {function}
 *  * @param {object} params 
 * @param {string}  [params.url] service Api 请求url 必填
 * @param {string}  [params .methods]  请求方法 必填
 * @param {string}  [params .params]  queryString 非必填
 * @param {object}  [params .data]  请求体， 非必填
 * @param {string}  [params .loadingName] 控制loading字段 ， 非必填
 * @param {function}  [params .successCallback] 成功回调， 非必填
 * @param {function}  [params .failCallback]  失败回调， 非必填（优先级3）
 * @param {function}  [params .customizeCallback] 自定义错误处理（优先级1），非必填，兼容不规范接口
 * @param {object}  [baseConfig.headers] 请求头设置， 非必填
 */
// main.js， mixin为true的实例
import baseUrl from './plugin/lib/CheckItemManage/src/api/host';
import request from '@ennbmp/axios-request-method';
Vue.use(request({
  baseUrl: baseUrl.host,
  mixin: true,
  headers: {
    'X-GW-AccessKey': '*******',
    ticket: sessionStorage.getItem('ticket') || '',
  },
}));
// test.js
export default {
	methods: {
	async	getTemplate() {
      		  const result = await  this.$sendRequest({
        	    	url: '/bmp-elec-config-bff/device/template/list',
        	    	methods: 'get',
        	    	data: {
          	    			entId: sessionStorage.getItem('entId'),
       		    	},
        	    	loadingName: 'templateLoading',
        	    	successCallback: data => {
          	    			this.templateList = data;
        	    	},
      		    });
                  // result也可以拿到返回结果
            console.log(result);
    	},
	}
}
// main.js mixin 为false的实例
import baseUrl from './plugin/lib/CheckItemManage/src/api/host';
import request from 'axios-request-method';
Vue.use(request({
  baseUrl: baseUrl.host,
  mixin: false,
  headers: {
    'X-GW-AccessKey': 'yiUMxMZ3yimP8Pjh0W8ffyuNvTpz59ry',
    ticket: sessionStorage.getItem('ticket') || '',
  },
}));
// test.js
// test.js
export default {
	methods: {
	// 需要自己去控制loading
		this.$service({
        	url: '/bmp-elec-config-bff/device/template/list',
        	methods: 'get',
        	data: {
          		entId: sessionStorage.getItem('entId'),
        	},
        	successCallback: data => {
          		this.templateList = data;
        	},
      });
	}
}