Question

我有以下类（这里删除了不必要的细节以使其更具可读性）：

class CollectionManager {
constructor(){
    this.collectionList = {};
}
initialize(collections){
    ...
}
populate(){
    var collectionObjs = Object.keys(this.collectionList).map(function(key){
        return collectionManager.collectionList[key];
    });
    return Promise.all(collectionObjs.map(function(collection){
        collection.populateVideos();
    }));
}
}

class Collection {
constructor(data){
    this.collectionInfo = data;
    this.videoArray = [];
}
populateVideos(){
    var collectionKey = this.collectionInfo.COLLECTIONID;
    var vChannels = Object.keys(this.collectionInfo.channels);
    return Promise.all(vChannels.map(requestVideos))
        .then(function (results) {
            var videoIdArray = [];
            return videoIdArray = [].concat.apply([], results);
        }).then(function(arrVideoIds){
            var groups = [];
            for (var i = 0; i < arrVideoIds.length; i += 50) {
                groups.push(arrVideoIds.slice(i, i + 50));
            }
            return groups;
        }).then(function(chunkedArrVideoIds){
            return Promise.all(chunkedArrVideoIds.map(requestVideoData)).then(function (results) {
                var videoTileArray = [].concat.apply([], results);
                collectionManager.collectionList[collectionKey].videoArray = videoTileArray;
                return videoTileArray;
            });
        });
}
displayCollection(){
    console.log(this.collectionInfo.COLLECTIONID);
    console.log(collectionManager.collectionList);
    console.log(collectionManager.collectionList[1]);
    console.log(collectionManager.collectionList[1].videoArray);

我称这些课程就像任何正常的承诺一样。

collectionManager.populate().then(
    function(){
        collectionManager.displayCollections()
    }
);

现在我的问题是，当我调用此代码并读取控制台上的内容时，videoArray在第4个控制台日志中完全为空。 collectionManager.collectionList[1]包含一个完整的对象，其中包含一个长度为100的videoArray，其中包含所有视频。但是，如果我打电话给collectionManager.collectionList[1].videoArray，它就是空的，就像它没有被填满一样。据我所知，那些应该调用相同的位置，但它会给出不同的结果。

有谁看到我搞砸了？

Answer 1

在populate函数中，你的Promise.all ... map返回一个undefined数组，Promise.all将立即解析

您应该执行以下操作

populate(){
    var collectionObjs = Object.keys(this.collectionList).map(function(key){
        return collectionManager.collectionList[key];
    });
    return Promise.all(collectionObjs.map(function(collection){
        return collection.populateVideos();
    }));
}

但是，当你使用Class时 - 你已经在使用更现代的javascript

所以

populate(){
    var collectionObjs = Object.keys(this.collectionList).map(key => collectionManager.collectionList[key]);
    return Promise.all(collectionObjs.map(collection => collection.populateVideos()));
}

完全可以接受

另外，您的class Collection也可以使用箭头功能变得更干净（在我看来），更好地保证链接

class Collection {
    constructor(data) {
        this.collectionInfo = data;
        this.videoArray = [];
    }
    populateVideos() {
        var collectionKey = this.collectionInfo.COLLECTIONID;
        var vChannels = Object.keys(this.collectionInfo.channels);
        return Promise.all(vChannels.map(requestVideos))
        .then(results => [].concat.apply([], results))
        .then(arrVideoIds => {
            var groups = [];
            for (var i = 0; i < arrVideoIds.length; i += 50) {
                groups.push(arrVideoIds.slice(i, i + 50));
            }
            return groups;
        )
        .then(chunkedArrVideoIds => Promise.all(chunkedArrVideoIds.map(requestVideoData)))
        .then(function(results) {
            var videoTileArray = [].concat.apply([], results);
            collectionManager.collectionList[collectionKey].videoArray = videoTileArray;
            return videoTileArray;
        });
    }
    displayCollection() {
        console.log(this.collectionInfo.COLLECTIONID);
        console.log(collectionManager.collectionList);
        console.log(collectionManager.collectionList[1]);
        console.log(collectionManager.collectionList[1].videoArray);
    }
}

Answer 2

我会避免使用console.log（）调试，除非你真的想让自己感到沮丧。这可能是一个简单的问题，console.log（）没有按预期运行。相反，我建议在displayCollection()中调试调试器语句。您所要做的就是将debugger;行添加到该函数的代码中，并在运行时打开chrome dev工具。执行将在该行停止并允许您使用chrome dev工具（或您正在使用的任何浏览器的开发工具）检查应用程序状态。基于您在那里的四个打印陈述，我认为可能只是因为它没有按照您的预期打印。

Javascript类在console.log中返回不同的值

2 个答案: