来自递归获取请求的数组未正确返回

Question

我正在尝试使用 Slack 的 API 学习基于光标的分页。我的目标是 return 使用 channel.history 方法的所有消息的数组。

我有一个 javascript 递归获取函数，但我似乎无法将局部变量 "final" 正确地获取到 return。

记录 "Pagination results successful" 的部分正在记录并 return 按预期长度为 204 的数组。

当在该范围外调用 "final" 时，长度为 0。

我已经尝试在 return 变量 final 的位置进行试验，但似乎无法使其正常工作。我认为这与不使用回调函数有关，但我不确定在哪里实现它。

这是我所拥有的（删除了我的 Slack 令牌）。

function paginate() {
  let final = [];

  let selectChannel = function(ts) {
    fetch('https://slack.com/api/channels.history?token=MY_TOKEN&channel=C6W9FH2S0&latest=' + ts)
      .then(response => response.json())
      .then(responseData => {
        let messages = responseData.messages;
        if (!responseData.has_more) {
          final.push.apply(final, messages);
          console.log('Pagination results successfull, 204 items in the array!', final);
          return final;
        } else {
          final.push.apply(final, messages);
          selectChannel(messages[messages.length - 1].ts);
        }
        return final;
      })
      .catch(error => {
        console.log('Error fetching and parsing data', error);
      });
  }

  selectChannel(new Date());
  // Returning as 0, when I am expecting 204
  console.log("Final Output", final.length);
  return final;
}


var x = paginate();
// By extention, this is returning as 0, when I am expecting 204 as well
console.log("Output", x.length);

Answer 1

这是因为 then 函数中的代码稍后执行 (hello async await :)。

fetch() return 承诺在将来执行某个点并且可以 return 这个承诺并添加另一个 then() 方法并在那里 console.log( )

这是按执行顺序排列的代码块，这可能会澄清一些事情：

function paginate() {  /* 2 */
  let final = [];

  let selectChannel = function(ts) { /* 4 */
    fetch('https://slack.com/api/channels.history?token=MY_TOKEN&channel=C6W9FH2S0&latest=' + ts)
      .then(response => response.json() /* 8 */)
      .then(responseData => { /* 9 */
        let messages = responseData.messages;
        if (!responseData.has_more) {
          final.push.apply(final, messages);
          console.log('Pagination results successfull, 204 items in the array!', final);
          return final;
        } else {
          final.push.apply(final, messages);
          selectChannel(messages[messages.length - 1].ts);
        }
        return final;
      })
      .catch(error => { /* 10 */
        console.log('Error fetching and parsing data', error);
      });
  }

  selectChannel(new Date()); /* 3 */
  // Returning as 0, when I am expecting 204
  console.log("Final Output", final.length); /* 5 */
  return final; /* 6 */
}


var x = paginate(); /* 1 */
// By extention, this is returning as 0, when I am expecting 204 as well
console.log("Output", x.length); /* 7 */

如您所见，第 7 步记录了 x.length 结果，而仅在第 9 步才最终填充此结果（最终变量填充 step/code-block 9）

在异步世界中，您的代码（必须）如下所示：

async function selectChannel() {
    try {
        var response = await fetch('https://slack.com/api/channels.history?token=MY_TOKEN&channel=C6W9FH2S0&latest=' + ts);
        var responseData = await response.json();
        let messages = responseData.messages;
        if (!responseData.has_more) {
            final.push.apply(final, messages);
            console.log('Pagination results successfull, 204 items in the array!', final);
            return final;
        } else {
            final.push.apply(final, messages);
            await selectChannel(messages[messages.length - 1].ts);
        }
        return final;
    } catch (error) {
        console.log('Error fetching and parsing data', error);
    }
}

async function execute() {
    var finalData = await selectChannel(new Date());
    console.log("Final Output", finalData.length);
}

execute() // optionally: .then(x=> console.log('we are finished executing!'));

来自递归获取请求的数组未正确返回

array from recursive fetch request not returning properly

javascript

arrays

api

slack-api

fetch-api