$ q.reject和$ state.resolve没有按预期工作

时间:2016-02-17 15:56:32

标签: angularjs angular-promise

我有这个功能:

// Gets our sport
get: function (slug, kit) {

    // If we have no slug, exit the function
    if (!slug)
        return $q.reject('No slug supplied.');

    // Try to get our sport
    return moltin.categories.get(slug).then(function (response) {

        // If we have a kit
        if (kit) {

            // Assign our sport to our kit
            kit.team.sport = response.slug;
        }

        // Return our response
        return response;
    });
}

如果没有设置我的必需参数,你可以看到我正在使用 $ q.reject()。 问题是,在 $ state resolve方法中,如果我调用这样的函数:

resolve: {

    sport: ['$stateParams', 'kit', 'SimpleDesignerSharedSportService', function ($stateParmas, kit, sharedSport) {

        // Get our slug
        var slug = $stateParmas.sport || kit.team.sport;

        // Get our sport
        return sharedSport.get(slug, kit);
    }]
}

我的视图不会显示(它只是空白)。但如果我改变了我的决心:

resolve: {

    sport: ['$stateParams', 'kit', 'SimpleDesignerSharedSportService', function ($stateParmas, kit, sharedSport) {

        // Get our slug
        var slug = $stateParmas.sport || kit.team.sport;

        // Get our sport
        return sharedSport.get(slug, kit).then(function (response) {
            return response;
        }, function (error) {
            return null;
        });
    }],

    pageTitle: ['PageHead', function (service) {
        service.setTitle('Kudos Sports - Create your kit');
    }]
}

它有效。我不想指定成功和失败方法。无论如何我可以绕过它吗?

1 个答案:

答案 0 :(得分:2)

解析期望一个承诺,以便它可以在加载页面之前解决它。您的代码中存在一些我会帮助您识别和解决的问题,但我强烈建议您采用this short course on Udacity并加强对承诺的理解。

首先,我们需要重构你的get方法,以便在数据解析后返回一个promise。

// Gets our sport
get: function (slug, kit) {
  var deferred = $q.defer();

  // If we have no slug, exit the function
  if (!slug)
    deferred.reject('No slug supplied.');

  // Try to get our sport
  moltin.categories.get(slug).then(function (response) {

    // If we have a kit
    if (kit) {

        // Assign our sport to our kit
        kit.team.sport = response.slug;
    }

    // Return our response
    deferred.resolve(response);
  });

  return deferred.promise;
}

如您所见,您无法在承诺中返回数据。您必须创建另一个承诺,并在有数据后返回。

下一步是在解决方案中使用此功能。您似乎使用了$stateParmas而不是$stateParams,因此我们也对此进行了更正。此外,在不同的地方以不同的方式命名您的服务是不好的做法。与命名约定保持一致使调试更容易。

resolve: {

  sport: ['$stateParams', 'kit', 'SimpleDesignerSharedSportService', function ($stateParams, kit, SimpleDesignerSharedSportService) {

    // Get our slug
    var slug = $stateParams.sport || kit.team.sport;

    // Get our sport
    return SimpleDesignerSharedSportService.get(slug, kit);
  }]
}

现在,get方法返回一个promise,只有在获取类别的响应并且您再次控制数据流时才会解析。