angularJs同步请求
今天在写几级联动的时候,因为比如上一个接口请求数据成功返回后,才能根据上一个接口返回的数据请求下一个接口,以此类推;因此有了同步请求的想法。
在前端做同步读取显然不是好的实践做法,同步之后会严重影响前端的体验和性能
AngularJS提供了一个内置Service $q,它提供了一种承诺/延后(promise/deferred),可以保证我们的调用代码一定能够拿到数据。当然,我们可以猜到,最后去服务器取数据的方式肯定是异步的。只不过这个服务提供了表面上是同步访问的API,当数据获取成功之后,自动将数据提供给调用的代码。
// $q 是内置服务,所以可以直接使用 ngApp.factory('UserInfo', ['$http', '$q', function ($http, $q) { return { query : function() { var deferred = $q.defer(); // 声明延后执行,表示要去监控后面的执行 $http({method: 'GET', url: 'scripts/mine.json'}). success(function(data, status, headers, config) { deferred.resolve(data); // 声明执行成功,即http请求数据成功,可以返回数据了 }). error(function(data, status, headers, config) { deferred.reject(data); // 声明执行失败,即服务器返回错误 }); return deferred.promise; // 返回承诺,这里并不是最终数据,而是访问最终数据的API } // end query }; }]);
2. 在Controller上使用这个Service:
angular.module('ngApp') .controller('MainCtrl', ['$scope', 'UserInfo', function ($scope, UserInfo) { // 引用我们定义的UserInfo服务 var promise = UserInfo.query(); // 同步调用,获得承诺接口 promise.then(function(data) { // 调用承诺API获取数据 .resolve $scope.user = data; }, function(data) { // 处理错误 .reject $scope.user = {error: '用户不存在!'}; }); }]);