在Angular应用的路由中的resolve中创建一个承诺

Creating a promise within resolve in routes for Angular app

本文关键字：resolve 创建 一个承诺 路由 Angular 应用      更新时间：2023-09-26

我目前正在开发一个Angular应用程序，但是我很难实现resolve的承诺。我想完成的内容如下:

  1. 获取用户的地理位置
  2. 使用用户的地理位置作为API调用SongKick的参数
  3. 从API调用成功接收数据后，我希望home.html页面加载q.resolve
    4. 中找到的数据

所有人都希望这一切按顺序发生。基本上，在显示我的主页之前，我需要获得一些数据。问题是，当我在homeCtrl中控制台日志getLocation时，它是未定义的。有人知道为什么或有更好的方法来处理这种事情吗?

供参考: assignValues是在定义了地理位置值之后的成功回调。

routes.js 

   angular.module('APP', ['ui.router',
                              'APP.home',
                              'uiGmapgoogle-maps'
                              ])
.config(function($urlRouterProvider, $stateProvider, uiGmapGoogleMapApiProvider) {
$stateProvider.state("home", {
                url:"/",
                templateUrl: '/home.html',
                controller: 'homeCtrl',
                resolve: {
                  getLocation: function(dataFactory, $q){
                    var q = $q.defer();
                    navigator.geolocation.getCurrentPosition(assignValues);
                    function assignValues(position) {
                      dataFactory.getMetroArea(position.coords.latitude, position.coords.longitude).then(function(data){
                      q.resolve(data);
                      return q.promise;
                    })
                   }
                 }
                }
              })

HomeCtrl.js 

angular.module('APP.home',['APP.factory'])
.controller('homeCtrl', ['$rootScope', '$scope', '$http', '$location', 'dataFactory', 'artists','uiGmapGoogleMapApi', 'getLocation', homeCtrl])
function homeCtrl($rootScope, $scope, $http, $location, dataFactory, artists, uiGmapGoogleMapApi, getLocation){
  $scope.googleMapsData = getLocation
}

dataFactory.js(省略工厂的其余部分)

  dataFactory.getMetroArea = function(lat, lon){
    return $http.get('http://api.songkick.com/api/3.0/search/locations.json?location=geo:'+ lat + ',' + lon + '&apikey=APIKEY')
  }

Resolve方法需要返回承诺或实际数据。这是一个清理后的resolve方法，其中包括拒绝(你不想让你的请求挂起)。

angular.module('APP', ['ui.router', 'APP.home', 'uiGmapgoogle-maps'])
  .config(function($urlRouterProvider, $stateProvider, uiGmapGoogleMapApiProvider) {
    $stateProvider.state("home", {
      url: "/",
      templateUrl: '/home.html',
      controller: 'homeCtrl',
      resolve: {
        getLocation: function(dataFactory,$q) {
          var q = $q.defer();
          navigator.geolocation.getCurrentPosition(function(position){
            dataFactory.getMetroArea(position.coords.latitude, position.coords.longitude).then(function(data){
              q.resolve(data);
            },function(err){
              q.reject(err);
            })
          },function(err){
            q.reject(err);
          });
          return q.promise;
        }
      }
    });
  });

我认为你的getLocation函数应该是

getLocation: function(dataFactory, $q){
    var q = $q.defer();
    navigator.geolocation.getCurrentPosition(assignValues);
    function assignValues(position) {
        dataFactory.getMetroArea(position.coords.latitude, position.coords.longitude)
        .then(function(data){
            q.resolve(data);
        });
    }
    return q.promise;
}
相关文章：