javascript - 按照 promise 将 .map 函数中的扩展对象从服务返回到 Controller

Question

我想要完成的是扩展服务中的 JSON 对象，然后将其传递给 Controller ​​。

JSON 从另一个进行后端调用的服务获取服务。

代码非常复杂，所以我添加了注释和console.logs:

    //get games config object from another service
    gamesConfig: gamesConfigService.gamesConfig(),

    // prepare name of games icons. This is support function executed in next method
    transformSpace: function(subject) {
        var ensuredSubject = subject.toString().toLowerCase();
        var transformedSubject = ensuredSubject.replace(/ /g, '_');
        return transformedSubject;
    },

    //add iconname property to game config object
    extendGameConfig: function() {

        var that = this;

        this.gamesConfig
        .then(function (response) {

            console.log(response.data); // this works and console.log my JSON

            response.data.map(function(obj) {

                return new Promise(function(res){
                    angular.extend(obj, {
                        iconname: that.transformSpace(obj.attributes.name) + "_icon.png"
                    });
                });

            });

        }, function () {
            console.log('errror');
        });

这包含一个支持方法transformSpace和一个未正确传递数据的主要方法。 (我认为)

我试图通过以下方式在 Controller 中接收此 promise :

theService.getGamesObj.extendGameConfig()
    .then(function (response) {
        $scope.allGames = response;
        console.log($scope.allGames);
    }, function () {
        console.log('err')
    });

然后我将在 View 中使用它。目前上面的代码不起作用并给出以下错误:

TypeError: Cannot read property 'then' of undefined

Answer 1

我在我认为您的代码有问题的地方添加了注释

extendGameConfig: function() {
    // ***********
    // use => functions, that = this wont be needed
    var that = this;
    // ***********
    // if you want this this function to return something, add a return 
    // this is why you get the 
    // Cannot read property 'then' of undefined error
    // as this function returns undefined
    this.gamesConfig
    .then(function (response) {

        console.log(response.data); // this works and console.log my JSON
        // ***********
        // you're using .map ... and discarding the result! 
        response.data.map(function(obj) {
            // ***********
            // you're creating a promise that never resolves!
            // also, why are you promisifying synchronous code?
            return new Promise(function(res){
                angular.extend(obj, {
                    iconname: that.transformSpace(obj.attributes.name) + "_icon.png"
                });
            });
        });
    }, function () {
        console.log('errror');
    });

所以，试试这个

extendGameConfig: function() {
    return this.gamesConfig
    .then(response => {
        return response.data.map(obj => {
            return angular.extend(obj, {iconname: this.transformSpace(obj.attributes.name) + "_icon.png"});
        });
    }, function () {
        console.log('errror');
    });

或者，更好

extendGameConfig: function() {
    return this.gamesConfig
    .then(response => 
        response.data.map(obj => 
            angular.extend(obj, {iconname: this.transformSpace(obj.attributes.name) + "_icon.png"})
        )
    )
    .catch(function (err) {
        console.log('error', err);
        throw err; // log the error, but you'll probably want to reject this promise so the calling code doesn't think there is success?
    });
}