Vue2在实际项目中的应用——服务层介绍

所谓的服务层就是对http请求的封装，最好不要直接在业务逻辑的代码里掺杂像下面类似的直接ajax调用：

$.ajax({
			url: 'https://url.com/user',
   			type: 'get',
   			dataType:'json',
   			contentType: "application/json;charset=UTF-8",
   			crossDomain: true,
   			success: function(data){}
})

上面的代码片段很难维护，会产生大量的重复代码。最好的办法是对几个http方法先进行一次封装，我们会封装成一个http.utils.js，放到library中去：

import Vue from 'vue';
import $ from 'jquery';
/**
	* 封装Http请求相关工具函数.
	* @namespace HttpUtils
*/
export default {
	/**
		* GET请求
		* @memberof HttpUtils.
		* @param {string} url
		* @param {object} options 参考vue-resource
	*/
	'get' (url, options) {
		return Vue.http.get(url, options);
	},
	/**
		* JSONP请求
		* @memberof HttpUtils.
		* @param {string} url
		* @param {object} options 参考vue-resource
	*/
	'jsonp' (url, options) {
		return Vue.http.jsonp(url, options);
	},
	/**
		* POST请求
		* @memberof HttpUtils.
		* @param {string} url
		* @param {object} body
		* @param {object} options 参考vue-resource
	*/
	'post' (url, body, options) {
		return Vue.http.post(url, body, options);
	},
	/**
		* DELETE请求
		* @memberof HttpUtils.
		* @param {string} url
		* @param {object} options 参考vue-resource
	*/
	'del' (url, options) {
		return Vue.http['delete'](url, options);
	},
	/**
		* PUT请求
		* @memberof HttpUtils.
		* @param {string} url
		* @param {object} body
		* @param {object} options 参考vue-resource
	*/
	'put' (url, body, options) {
		return Vue.http.put(url, body, options);
	},
	/**
		* PATCH请求
		* @memberof HttpUtils.
		* @param {string} url
		* @param {object} body
		* @param {object} options 参考vue-resource
	*/
	'patch' (url, body, options) {
		return Vue.http.patch(url, body, options);
	},
	/**
		* SCRIPT请求，调用JQuery中的请求script方法，默认会缓存
		* @memberof HttpUtils.
		* @param {string} url
	*/
	'script' (url) {
		return new Promise((resolve, reject) => {
			$.ajax({
				dataType: 'script',
				cache: true,
				url: url
			}).done(function (script, textStatus) {
				resolve(script, textStatus);
			}).fail(function (jqxhr, settings, exception) {
				reject(exception);
			});
		});
	}
};

然后再次封装对后端请求的调用，针对不同的resource，封装成不同的service，对应的service代码和业务代码放到一起。下面拿审计服务来讲：

所有服务层代码以.service后缀结尾，和相关的业务逻辑代码放在一起，比较好维护。而且当其它地方也需要这个服务的时候，可以直接import，利于重复使用。

下面看一下里面的具体代码示例：

import {Constants} from 'utils';
import {HttpUtils} from 'datapp';

let AuditSrv = {

	urls: {
		'list': Constants.BASE_URL + '/audits'
	},

	list (params = '') {
		return HttpUtils.get(this.urls.list + '?' + params);
	}
};

export {AuditSrv};

在代码中使用：

<script>
import {AuditSrv} from './audit.service';

export default {
	name: 'Audit',
    。。。
	methods: {
		loadData () {
			AuditSrv.list(this.query).then((response) => {

			}).catch(() => {

			});
		}
	}
};

</script>