javascript - Promise 返回数据 ''

Question

我使用nodejs从youtube获取的数据是 -

    [ { title:
         'Dil  Zaffran Video Song | Rahat Fateh Ali Khan |  Ravi Shankar |  Kamal Chandra | Shivin | Palak',
        id: 'vChX3XZXqN4',
        view: '28652353' },
      { title:
         'Full Video: Akh Lad Jaave | Loveyatri | Aayush S|Warina H |Badshah, Tanishk Bagchi,Jubin N, ,Asees K',
        id: 'e_vl5aFXB4Q',
        view: '17328447' 
}]

现在我想搜索每个视频的 5 个相关视频

我的API

getVids(videosID)
        .then(result => {
            console.log(result)  //this is the data which I showed above
            result.sort((a,b) => b.view - a.view);
            return result;
        })
        .then(result => {

            return result.map(function(el) {
                // console.log(el);
                let o = Object.assign({}, el);

                o.relatedVideos = relatedVideos(el.id); //function is called below
                return o;
            });
        })
        .then(result => {
            console.log(result);
        })
        .catch(err => {
            console.log(err)
        })

下面给出了 5 个相关视频的 api

function relatedVideos(videoId) {

    return new Promise((resolve, reject) => {
        let urls = 'https://www.googleapis.com/youtube/v3/search?relatedToVideoId=' + videoId + '&key=' + API_KEY + '&part=snippet&type=video';
        request(urls, (err, result) => {
            const data = JSON.parse(result.body);
            const relatedVideos = [];
            data.items.forEach(related => {
                relatedVideos.push({
                    title: related.snippet.title
                });
                if(relatedVideos.length === 5){
                    resolve(relatedVideos);
                }
            });
        });
    });
}

它给出的输出如下

    [ { title:
         'Dil  Zaffran Video Song | Rahat Fateh Ali Khan |  Ravi Shankar |  Kamal Chandra | Shivin | Palak',
        id: 'vChX3XZXqN4',
        view: '28655496',
        relatedVideos: Promise { <pending> } },
      { title:
         'Full Video: Akh Lad Jaave | Loveyatri | Aayush S|Warina H |Badshah, Tanishk Bagchi,Jubin N, ,Asees K',
        id: 'e_vl5aFXB4Q',
        view: '17334681',
        relatedVideos: Promise { <pending> }
 }]

如何解决此待处理问题或如何等待以获得完整数据。

Answer 1

发生这种情况是因为您将 latedVideos() 返回的 promise 分配给属性 latedVideos，而您实际上从未等待它解析。在继续之前，您需要等待所有的 Promise，这可以通过 Promise.all() 轻松完成。让我们重点关注这部分代码:

        return result.map(function(el) {
            // console.log(el);
            let o = Object.assign({}, el);

            o.relatedVideos = relatedVideos(el.id); //function is called below
            return o;
        });

您需要做的是等待每个 Promise 解析，以便在将其分配给对象之前获取其解析值。然后，您还需要创建一个在所有这些 promise 都解决之前不会解决的 promise 。这就是 Promise.all() 的用途。将上面的代码改成这样:

        return Promise.all(result.map(function(el) {
            // console.log(el);
            let o = Object.assign({}, el);

            return relatedVideos(el.id)
                .then(function(relatedVideo) {
                    o.relatedVideos = relatedVideo;
                    return o;
                });
        }));

请注意，映射到 Promise.all() 的所有 promise 都需要解析，以便链继续下一个 then。如果其中一项 promise 遭到拒绝或根本无法解决，那么它就永远不会继续下去。您在 latedVideos() 函数中为 resolve() 调用设置了一个条件。这意味着在某些情况下， promise 可能最终永远无法解决。您应该始终解决或拒绝 promise ，也许 resolve(null) 适合您的情况。