我們觀察這兩個M層文件，不難發現在調用$http時，有大量重復的代碼.  考慮到在進行數據請求時，可能發生比如：用戶未登陸或是用戶沒有操作權限等，的錯誤。我們需要同一對發生的錯誤進行處理。鑒于此，我們對$http請求進行重構。 重構以前，我們進行數據請求時，時序圖是這樣。  重構后，時序圖變成了這樣：  這使得，可以大量的減少我們書寫的重復的代碼；可以統一對資源請求的錯誤進行錯誤；可以結合后臺返回的數據，來更友好控制用戶的訪問權限。 > 新建service: yo angular:service server ``` 'use strict'; /** * @ngdoc service * @name webAppApp.server * @description * # server * Service in the webAppApp. */ angular.module('webAppApp') .service('server', function($http) { var http = function(param, callback) { var data = {}; // 設置請求的header param.header = { contentType: 'application/json', }; // 統一處理URL param.url = 'http://127.0.0.1:8080/javaee' + param.url; $http(param).then(function successCallback(response) { console.log(response); data = response.data; // 網絡發生錯誤 }, function errorCallback(response) { console.log('網絡請求發生錯誤:'); console.log(response); }). // 發生異常 catch(function(e) { console.log('$http發生異常: ', e); throw e; }).finally(function() { // todo:進行錯誤碼的判斷，如果提示用戶未登陸，則跳轉至登陸頁面 if (typeof(data.code) === 'undefined') { console.log('未獲取到code值'); } else if (data.code !== 200) { // 返回的狀態碼不是200，則說明發生了錯誤 console.log('返回的狀態碼為' + data.code); checkCode(data.code); } else { // 調用回調函數, 返回數據 callback(data); } }); }; // 核驗錯誤碼 var checkCode = function(code) { if (code === 401) { console.log('用戶尚未登陸，或停留的時間過長'); // 跳轉至用戶登陸界面 } else if (code === 403) { console.log('用戶無此操作權限'); // 提示用戶無此權限 } else { console.log('接收到了未定義的錯誤碼'); } }; // Public API here return { http: http }; }); ``` ## 重構user.js ``` 'use strict'; /** * @ngdoc service * @name webAppApp.user * @description * # user * Service in the webAppApp. */ angular.module('webAppApp') .service('user', function(server) { /** * 用戶登陸 * @param {string} username 用戶名 * @param {string} password 密碼 * @param {Function} callback 回調函數 * @return {} * @author 夢云智 http://www.mengyunzhi.com * @DateTime 2017-02-07T18:34:55+0800 */ var login = function(username, password, callback) { server.http({ method: 'POST', url: '/User_login', data: { username: username, password: password } }, function(response) { // 將是否通過驗證傳給V層 callback(response.isPassed); }); }; return { login: login }; }); ``` ## 重構teacher.js ``` 'use strict'; /** * @ngdoc service * @name webAppApp.teacher * @description * # teacher * Service in the webAppApp. */ angular.module('webAppApp') .service('teacher', function(server) { /** * 獲取當前頁的教師 * @param {string} name 查詢教師的名字 * @param {int} page 第幾頁 * @param {int} pageSize 每頁多少條 * @param {Function} callback 回調函數 * @return {[type]} * @author 夢云智 http://www.mengyunzhi.com * @DateTime 2017-01-21T19:05:55+0800 */ var paginate = function(name, page, pageSize, callback) { var teachers = []; // 進行http POST請求. // 由于是post請求方式，所以即便是我們在項目中存在paginate.json文件 // 但如果我們查看控制臺，仍然會發現有錯誤產生，同時，沒有正確的接收到數據 server.http({ method: 'POST', url: '/teacher/indexJson', data: { name: name, page: page, pageSize: pageSize } }, function(response) { teachers = response.teachers; callback(teachers); }); }; // Public API here return { // 獲取全部教師信息 paginate: function(name, page, pageSize, callback) { return paginate(name, page, pageSize, callback); }, }; }); ``` 沒錯，如果你現在僅僅是在進行前臺的學習，那么，此時，你只需要將`server`中的`param.url = 'http://127.0.0.1:8080/javaee' + param.url;`修改為：`param.url = 'http://www.mengyunzhi.com:8080/javaee' + param.url;` > git checkout -f step11.6