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>