异步服务调用不起作用

Question

here is my index.js

import ProductDetailController from './product-detail.controller.js';
import ProductDetailManager from './product-detail.manager.js';
import ProductDetailService from './../services/product-detail.service.js';

export default angular.module('myApp.productDetail', [uirouter])
    .controller('ProductDetailController', ProductDetailController)
    .service('productDetailManager', ProductDetailManager)
    .service('productDetailService', ProductDetailService)        
    .name;

here is my controller

export default class ProductDetailController {
    constructor( logger, productDetailManager, $stateParams) {

        this.productDetailManager = productDetailManager;            
        this.activate();
    }

    activate() {
        return this.loadProduct(this.$stateParams.boutiqueId,this.$stateParams.productId).then(()=> {

        });
    }

    loadProduct(boutiqueId, productId) {
        //async
        return this.productDetailManager.getProduct(boutiqueId, productId).then((response)=> {
            return this.response;
        });
    }
}

ProductDetailController.$inject = [ 'logger', 'productDetailManager', '$stateParams'];

Here is my Manager

export default class ProductDetailManager {
    constructor( logger, productDetailService) {

        this.productDetailService = productDetailService;
        this.logger = logger;

    }

    getProduct(boutiqueId, productId) {
        //async
        return this.productDetailService.find(boutiqueId, productId).then((response)=> {
            console.log(this.response);
            return this.response;
        });
    }
}

ProductDetailManager.$inject = [ 'logger', 'productDetailService'];

And Here is my service

export default class ProductDetailService {

    constructor($http, $q, logger, configurationService) {
        this.$http = $http;
        this.$q = $q;
        this.logger = logger;
        this.configurationService = configurationService;
        this.basePath = this.configurationService.get('catalogApiBasePath');
    }


    find(boutiqueId, productId) {


        var deferred = this.$q.defer();

        this.$http.defaults.headers.common.Authorization = 'Bearer ---';
        this.$http.defaults.headers.common.X_AUTH_VERSION = '---';

        this.$http.get(`${this.basePath}/product/detail?boutiqueId=${boutiqueId}&productId=${productId}`)

            .success((data, status, headers, config)=> {
                deferred.resolve(data);
            })
            .error((data, status) => {
                this.logger.error('XHR Failed for ProductDetailService#find.' + data);
                deferred.reject(data);
            });

        return deferred.promise;
    }
}

ProductDetailService.$inject = ['$http', '$q', 'logger', 'configurationService'];

I wanted to change service data on my manager then return to the controller, however manager is getting undefined data.

I am doing something wrong with async calls and could not find what I am missing here

Answer 1

I guess the error is here:

 return this.productDetailService.find(boutiqueId, productId).then((response) => {
     console.log(this.response); // here should be just `response` as it is argument
     return this.response;
 });