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

Question

我有这个功能：

// 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: {

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

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

Answer 1

解决需要一个承诺，以便它可以在加载页面之前解决它。您的代码中有一些问题我会帮助您识别和解决，但是我强烈建议您学习 this short course on Udacity 并温习一下您对 promises 的理解。

首先，一旦您的数据得到解析，我们需要将您的 get 方法重构为 return 承诺。

// 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;
}

如您所见，您不能只 return promise 中的数据。您必须创建另一个承诺，并且 return 一旦有数据。

下一步是在解析中使用此函数。您似乎使用了 $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 方法 return 是一个承诺，只有在获取类别有响应并且您再次控制数据流时才会解决。

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

$q.reject and $state.resolve not working as expected

angularjs

angular-promise