我们观察这两个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