Vue添加中间层–service层

在单页面应用中，为了方便代码的管理，提高可读性，还有一个原因就是，在项目开发工程中，前端人员与后端开发人员的进程是不同步的，在不同步的情况下，前端人员会使用假数据来模拟后端传送过来的数据，为了节省后期联调的时间，所以把service引入到了vue中。

service层

service层主要是新建一个js文件，用来写用到的方法。

import axios from "axios";
//使用假数据
const isRealData = require("../../static/serverconfig").isRealData;
var EquipmentService = {
	getVenders: function () {
	    return new Promise((resolve, reject) => {
	    //使用真数据
	      if (isRealData) {
	        axios .get("/equipment-venders").then(res => {
	            let {code, data, msg} = res.data;
	            if (code == 200) {
	              resolve(data);
	            } else {
	              reject(msg + ",地址:/venders");
	            }
	          })
	          .catch(error => {
	            reject(error.response.status + " " + error.response.data);
	          });
	      } else {
	        // 假数据
	    }
	});
  },
}
export {
	EquipmentService
};

在要使用的文件中引入service层

<script>
	import { EquipmentService } from "../../../../services/equipmentService";
</script>
export default {
	mounted(){
    	//获取供应商
        EquipmentService.getVenders().then(
            res=>{
                this.venders = res
            },
            error=>{
                this.Log.info(error)
            }
        )
	}
}

选择使用真实数据还是假数据，用cli搭建的文件的话，在static下面新建一个serverconfig.json文件

{
    "isRealData": true
}