javascript - 在 Promise 中获取 then 的结果

Question

我正在尝试解决以下问题。

在下面的代码中，我尝试从内部 then 函数获取结果。我希望 let online 函数将返回 onlineResult.stream。但是，它返回:

如果期望:

或 null 当它为空时。

var baseUrl = "https://wind-bow.gomix.me/twitch-api";
var channels = [
  "ESL_SC2",
  "OgamingSC2",
  "cretetion",
  "freecodecamp",
  "storbeck",
  "habathcx",
  "RobotCaleb",
  "noobs2ninjas"
];

function fetchChannels(channels) {

  var listItems = [];
  if (Array.isArray(channels)) {

    const results = channels.map(channel =>
      $.getJSON(`${baseUrl}/channels/${channel}?callback=?`)
    );

    Promise.all(results).then(values => {
      values.forEach(val => {

        let online = $.getJSON(`${baseUrl}/streams/${val.name}?callback=?`)
          .then(onlineResult => {
            return onlineResult.stream;
          })
        console.log(online);
        listItems.push([val.name, val.logo]);
      });
    });
  }
}

fetchChannels(channels);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 1

您可能想要做的是将 then() 添加到第一个 channel 请求，并在该 channel 到达后立即获取与该 channel 关联的流

类似于:

var baseUrl = "https://wind-bow.gomix.me/twitch-api";
var channels = ["ESL_SC2", "OgamingSC2"];

function fetchChannels(channels) {

  if (!Array.isArray(channels)) {
    return Promise.reject('No channels array')
  } else {
    const channelPromises = channels.map(channel =>
      $.getJSON(`${baseUrl}/channels/${channel}?callback=?`)
      .then(fetchStream)
    );

    return Promise.all(channelPromises)
  }

  function fetchStream(channelResult) {

    return $.getJSON(`${baseUrl}/streams/${channelResult.name}?callback=?`)
      .then(streamResult => {
        return streamResult.stream;
      }).then(stream => {
        // adding the result of stream request as property of channel request ... adapt as needed
        channelResult.stream = stream;
        return channelResult
      })
  }
}

fetchChannels(channels)
  .then(res => console.log(res))// array of channel requests, each has a `"stream"` property
  .catch(err => console.log(err))

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>