如何从基于回调的 API 创建 AngularJS 承诺

How to create a AngularJS promise from a callback-based API

提问人:Bobys 提问时间:3/30/2017 最后编辑:georgeawgBobys 更新时间:7/3/2018 访问量:184

问:

WiFiService.js:

angular.module('app.WifiServices', [])
    .factory('WifiService', function(){
        var unique_array = angular.fromJson('[]');

        function win_wifi(e){
        alert("Success");
        }

        function fail_wifi(e){
        alert("Error");
        }

        function connectWifi(wifi_ssid){
          WifiWizard.connectNetwork(wifi_ssid, win_wifi, fail_wifi);
        }

        function listHandler(a){

      var network_array = [];
      for(var i=0; i<a.length; i++){
        network_array.push("SSID: " + a[i].SSID + " Signal: " + a[i].level);
      }

      unique_array = network_array.filter(function(elem, pos) {
        return network_array.indexOf(elem) == pos;
      });

      // alert("Wifi List Ready!");
    }

    function getScanResult(){
      WifiWizard.getScanResults(listHandler, failNetwork);
    }

    function successNetwork(e){
      window.setTimeout(function(){
        getScanResult();
      }, 3000);
    }

    function failNetwork(e){
      alert("Network Failure: " + e);
    }

    window.setTimeout(function(){
      WifiWizard.startScan(successNetwork, failNetwork);
    }, 1000);

        return {
          list: function(){
            return unique_array;
          },

          connectionToWifi: function(name){
            connectWifi(name);
          }
        };
    });

我的整个控制器:

app.controller('WifiController', ['$scope', 'WifiService', function($scope, WifiService) {

 $scope.wifiList = [];

 window.setTimeout(function() {
  $scope.wifiList = WifiService.list();
  // alert($scope.wifiList);
  $scope.$apply();
 }, 5000);

 $scope.getList = function() {
  $scope.wifiList = WifiService.list();
  return $scope.wifiList;
 }

 $scope.connectWifi = function(name) {
  WifiService.connectionToWifi(name);
 }

 $scope.checkin = function() {
  $scope.getList()
  .then(function(result) {
     console.log(result);
 });
}

}]);

我想做的是,调用 $scope.getList(),它返回周围 wifi SSID 的列表,然后在 $scope.checkin() 中我想处理这些数据。

由于扫描需要一些时间,我必须等待getList函数完成,这就是我尝试使用.then的原因,但它给了我标题上的错误。有什么想法吗?

angularjs angular-promise (角度承诺)

评论

1赞 Tushar Gupta 3/30/2017
你需要归还一些有希望的东西!替代用途!.success
0赞 lealceldeiro 3/30/2017
@Tushar是对的,但请记住,这已被弃用!.success
0赞 tier1 3/30/2017
除非 WifiService.list() 有阻塞操作,否则没有理由在这里使用 promise。我们能看到这个函数是什么样子的吗?
0赞 Tushar Gupta 3/30/2017
@lealceldeiro正确,但这一切都取决于 。在它是 http 请求之前,不要看到任何承诺点WifiService.list()
1赞 clever_bassi 3/31/2017
看看你的代码,我认为这将帮助你更好地理解:codingeek.com/angularjs/......它确实帮助我了解何时使用(或不使用)scope.apply()。

答:

2赞 georgeawg 3/31/2017 #1

如何从基于回调的 API 创建 AngularJS 承诺

若要从基于回调的 API(如 WifiWizard.connectNetwork)创建 AngularJS 承诺,请使用 $q.defer

function connectWifi(wifi_ssid) {
   var future = $q.defer();
   var win_wifi = future.resolve;
   var fail_wifi = future.reject;
   WifiWizard.connectNetwork(wifi_ssid, win_wifi, fail_wifi);
   return future.promise;       
};

上面的示例返回一个 $q Service 承诺,该承诺使用来自 API 的回调解析或拒绝。

0赞 Bobys 3/31/2017 #2

好吧,我想出了不同的东西:

var unique_array = [];
  $scope.wifiList = [];
  $ionicLoading.show({
    template: "Scanning surrounding AP's..."
  });

 window.setTimeout(function() {
  $scope.wifiList = WifiService.list();
  // alert($scope.wifiList);
  while ($scope.wifiList == []) {
    console.log('Scanning...');
  }
  $scope.$apply();
  $ionicLoading.hide();
 }, 5000);

我意识到,一旦我加载视图,扫描就开始了。因此,我添加了一个 IonicLoader 来强制用户等待,并且在扫描完成之前无法按任何按钮。因此,任何函数都不应相互等待。在代码方面不太正确,但它可以满足我的需要。