迭代数据时嵌套 api 调用

Question

我正在按照与 "A simplified approach to calling APIs with redux" 相同的步骤进行 api 调用。

然而，当我得到我的结果时，我试图进行嵌套调用，但是 for 循环没有等待，所以我返回的数据都在错误的地方。我正在使用 superagent 来做出反应。

谢谢

这是我的代码

import request from 'superagent';
const dataService =

request
        .get('http://my-api.com/api/sets/coll_e8400ca3aebb4f70baf74a81aefd5a78/items/')
        .end((err, res) => {
            if (err) {
                return "error";
            }
            const data = JSON.parse(res.text);

        let sections = new Array(),
            section = null,
            episodes = null;

        for (var i = 0; i < data.objects.length; i++) {
            let type = data.objects[i].content_type.toLowerCase();

            if(type !== "episode") {
                if (section !== null) {
                    section.episodes = episodes;
                    sections.push(section);
                }
                section = new Object();
                episodes = new Array();
                section.header = data.objects[i].heading;
            }

            if(type === "episode") {
                var url = `http://my-api.com:8000${data.objects[i].content_url}`;
                request
                    .get(url)
                    .end((err, res) => {
                    const data2 = JSON.parse(res.text);

                    console.log("data2", data2);
                    var episode = new Object();
                    episode.title = data2.title;
                    episodes.push(episode);
                });
            }
        }

        section.episodes = episodes;
        sections.push(section);

        console.log("sections", sections);
    })

export default dataService

编辑：问题出在我获取剧集的内部请求上。 var url = http://my-api.com:8000${data.objects[i].content_url};

Answer 1

根据你的描述，我仍然不确定你在哪里需要异步。我会猜的。但我建议您使用 Promise.all()。我将在下面展示一个例子。

import request from 'superagent';
const dataService =

request
        .get('http://my-api.com/api/sets/coll_e8400ca3aebb4f70baf74a81aefd5a78/items/')
        .end((err, res) => {
            if (err) {
                return "error";
            }
            const data = JSON.parse(res.text);

        let sections = new Array(),
            section = null,
            episodes = null;

        Promise.all(for (var i = 0; i < data.objects.length; i++) {
            let type = data.objects[i].content_type.toLowerCase();

            if(type !== "episode") {
                if (section !== null) {
                    section.episodes = episodes;
                    sections.push(section);
                }
                section = new Object();
                episodes = new Array();
                section.header = data.objects[i].heading;
            }

            if(type === "episode") {
                var url = `http://my-api.com:8000${data.objects[i].content_url}`;
                request
                    .get(url)
                    .end((err, res) => {
                    const data2 = JSON.parse(res.text);

                    console.log("data2", data2);
                    var episode = new Object();
                    episode.title = data2.title;
                    episodes.push(episode);
                });
            }
        }).then(() => {
            section.episodes = episodes;
            sections.push(section);

            console.log("sections", sections);
          }


    })

export default dataService

更新-----

Promise.all(if (type === "episode") {
    var url = `http://my-api.com:8000${data.objects[i].content_url}`;
    request
        //with superagent you can use promises like such.
        .get(url)
        .then((err, res) => {
            const data2 = JSON.parse(res.text);

            console.log("data2", data2);
            var episode = new Object();
            episode.title = data2.title;
            episodes.push(episode);
        });
}).then(() => {
    section.episodes = episodes;
    sections.push(section);

    console.log("sections", sections);
})

迭代数据时嵌套 api 调用

nested api calls when iterating over data

superagent

reactjs

react-redux