angularJs同步请求

落日映苍穹つ 2022-06-08 08:54 375阅读 0赞

最近在用angualr做微信开发，涉及到拿取用户登录信息，要在登录成功之后才可以进入相应的页面，在没有登录情况下去登录。

**首先想到同步请求的方法，我们可以用请求嵌套的方法实现，但是这样写代码量增多，并且可维护性减低。**

**在前端做同步读取显然不是好的实践做法，同步之后会严重影响前端的体验和性能。**

但是angular提供了一个内置Service $q，它提供了一种承诺/延后（promise/deferred），可以保证我们的调用代码一定能够拿到数据。当然，我们可以猜到，最后去服务器取数据的方式肯定是异步的。只不过这个服务提供了表面上是同步访问的API，当数据获取成功之后，自动将数据提供给调用的代码。

\*\*

> 第一步：自定义UserInfo服务

\*\*

// $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  
      };  
    }]);

\*\*

> 第二步：在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: '用户不存在！'};  
        });  
      }]);  
    复制代码

这样做不仅仅适用与微信，APP开发，PC端开发一样适用