javascript - axios 和 promises，数组值不可用但出现在 console.log 中

Question

我有嵌套的 axios 调用，所以使用 promises 来构建我将用于我的应用程序的数据数组。

第一次调用获取标题或剧集的列表。

第二次调用使用第一次收到的剧集 url 来获取额外数据。然后我将属性添加到我想在我的应用程序中使用的数据数组。这些是 title 和 image_urls[0]。

第三个调用然后获取 image_urls[0] 并执行调用以检索该实际图像。现在在这个调用中，当我使用 console.log 或对第二次调用中添加的值执行任何操作时，我得到未定义的值，但是如果我使用 console.log 我的完整数组，值就会出现!

 console.log("sections", sections); // show all the data including 2nd call
 console.log("image url", item.url); // This shows
 console.log("image title", item.title); // This doesn't and don't know why
 console.log("image imageurls", item.imageurls); // This doesn't and don't know why

这是我的代码

import axios from 'axios';

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

const dataService =
axios
    .get('http://feature-code-test.skylark-cms.qa.aws.ostmodern.co.uk:8000/api/sets/coll_e8400ca3aebb4f70baf74a81aefd5a78/items/')
    .then((response) => {

    var data = response.data.objects;

    Promise.all(data.map(function (item) {
        let type = item.content_type.toLowerCase();

        if (type !== "episode") {
            if (section !== null) {
                section.episodes = episodes;
                sections.push(section);
            }
            section = new Object();
            episodes = new Array();
            section.header = item.heading;
        }

        if (type === "episode") {
            var episode = new Object();
            episode.url = item.content_url;
            episodes.push(episode)
        }
    })).then(function () {
        section.episodes = episodes;
        sections.push(section);

        Promise.all(sections.map(function (item) {
            Promise.all(item.episodes.map(function (item) {
                var url = `http://feature-code-test.skylark-cms.qa.aws.ostmodern.co.uk:8000${item.url}`
                axios
                    .get(url)
                    .then((response) => {
                    var data = response.data;

                item.title = data.title;
                item.imageurls = data.image_urls[0] !== undefined ? data.image_urls[0] : "";
            });

            }))
        })).then(function () {
            Promise.all(sections.map(function (item) {
                Promise.all(item.episodes.map(function (item) {
                    console.log("sections", sections);
                    console.log("image urr", item.url);
                    console.log("image title", item.title);
                    console.log("image imageurls", item.imageurls);
                }));
            }));
        });;
    })
})

export default dataService

Answer 1

以下应该对你有用，我认为你必须花一点时间研究 promises、map 和 reduce。

我摆脱了 axios 并使用 fetch，因此可以在网站上打开 api page 时在浏览器中对其进行测试。并在控制台中运行代码(不带导出行并将 const 替换为 var)。

如果您需要任何帮助，请告诉我。

const base = "http://feature-code-test.skylark-cms.qa.aws.ostmodern.co.uk:8000";
const setEpisodeDetails = episode =>
  fetch(`${base}${episode.url}`)
    .then(response=>response.json())
    .then(
      data =>
        Object.assign(
          {}
          ,episode
          ,{
            title : data.title,
            imageurls : data.image_urls[0] || ""
          }
        )
    )
    .then(//fetch image url
      episode =>
        (episode.imageurls!=="")
          ? fetch(`${base}${episode.imageurls}`)
            .then(response=>response.json())
            .then(
              imageData=>
                Object.assign(
                  {},
                  episode,
                  {
                    image_content_url:imageData.url
                  }
                )
            )
          : episode
    );
const setAllEpisodeDetails = sections =>
  Promise.all(
    sections.map(
        section =>
          Promise.all(
            section.episodes.map(
              setEpisodeDetails
            )
          )
          .then(
            episodes =>
              Object.assign(
                {},
                section,
                {episodes}
              )
          )

    )
  );
const createSections = data =>
  data.reduce(
    (acc,item)=>{
      (item.content_type.toLowerCase()!=="episode")
        ? acc.push({header:item.heading,episodes:[]})
        : acc.slice(-1)[0].episodes.push({url:item.content_url})
      return acc
    },
    []
  );
const dataService =
  fetch(`${base}/api/sets/coll_e8400ca3aebb4f70baf74a81aefd5a78/items/`)
    .then(response=>response.json())
    .then(
      response =>
        setAllEpisodeDetails(createSections(response.objects))
    )
    .then(
      sections =>
          console.log(
            "sections", 
            JSON.stringify(sections,undefined,2)
          ) || //remove this console log if it works
          // (can remove the whole last then)
          //do not remove this it returns sections (unless you get rid of the whole then)
          sections
    );

//removed export, should log the result when done (or error)