javascript - 异步问题筛选器无法工作，因为数组为空

嗨，我遇到了一个异步问题，当我尝试过滤audioFile数组为空时，我需要在过滤器之前进行抓取，该怎么办？

const media = 'audio';
const searchInput = document.querySelector('.search');
const output = document.querySelector('.output')

searchInput.addEventListener('change', searchData);

async function searchData() {
  let search = this.value;
  const finalData = await getData(search);
  render(finalData);
}

function render(data) {
    let html;
if(media == 'image') {
   html = data.map(result => {
    return `
        <div class="image">
            <img src="${result.links[0].href}"/>
        </div>
    `
  }).join("");
} else {
          const audioFiles = [];
          data.map(result => {
            fetch(result.href)
            .then(blob => blob.json())
            .then(data => audioFiles.push(...data));
          })
          console.log(audioFiles);
          /* filter .mp3? */
          const regex = new RegExp(".mp3$");
          const files = audioFiles.filter(file => {
            return file.match(regex);
          })

          console.log(files);

}
output.innerHTML = html;

}

function getData(search) {
  const endpoint = `https://images-api.nasa.gov/search?q=${search}&media_type=${media}`;

  return fetch(endpoint)
    .then(blob => blob.json())
    .then(data => data.collection.items);
}

<input type="text" class="search" placeholder="planet">
<div class="output"></div>

音频文件在过滤器之前为空，我该如何解决它，以便音频文件在我对其进行过滤之前就在那里？？？

最佳答案

看起来您可以将更多.then()链接到现有目录上。

问题是：

      data.map(result => {
        fetch(result.href)
        .then(blob => blob.json())
        .then(data => audioFiles.push(...data));
      })

      // This part below is executing before `audiofiles` is populated
      console.log(audioFiles);
      /* filter .mp3? */
      const regex = new RegExp(".mp3$");
      const files = audioFiles.filter(file => {
        return file.match(regex);
      })

      console.log(files);

尝试：

      data.map(result => {
        fetch(result.href)
        .then(blob => blob.json())
        .then(data => audioFiles.push(...data))
        .then(() => new RegExp(".mp3$"))
        .then((regex) => audioFiles.filter(file => file.match(regex)))
        .then((files) => {
          console.log(files)

          // Set the HTML once it is done getting the audio
          output.innerHTML = html
        })
      })

我们正在使用implicit returns。

这个：

runFunction().then(data => console.log(data))

是相同的：

runFunction().then(data => {
  return console.log(data)
})

如果一个函数仅返回一个表达式，甚至是.then(data => data += 5)。

执行原始代码时，您必须考虑JavaScript在做什么。首先，它开始获取音频文件，并返回一个Promise，因此它将立即放入function queue中，然后继续执行代码。它从执行console.log(audiofiles)开始，但是函数队列中的提取尚未推送到audiofiles中，因为2毫秒前，Promise链开始执行blob.json()。然后，它将继续向下遍历您的代码并创建一个new RegExp，并同步设置files的值，因为.filter()是同步的。然后，它执行console.log(files)，其中包含一些垃圾，因为音频文件可能尚未推送数据。合理地说，在大多数情况下，这还没有价值。

解决方案是强制代码等待，并且您已经在使用一些async / await语法，因此您也可以在这里使用它...

这也许是一个更好的解决方案，它也更易于阅读，扩展和维护：

} else {
  data.map(result => fetch(result.href))
      .then(async (blob) => {
         const data = await blob.json();

         const audiofiles = [...data];
         console.log(audioFiles);

         /* filter .mp3? */
         const regex = new RegExp(".mp3$");

         const files = audioFiles.filter(file => file.match(regex));
         console.log(files);

         output.innerHTML = html;
       })
}

我将您的代码解释为好像您想最后加载html一样，但是根据正确的异步行为，如果页面尽快加载，并且音频文件准备好后再加载，则是最佳选择。这可能是您的初衷，在这种情况下，请将其移回if/else块之外。

关于javascript - 异步问题筛选器无法工作，因为数组为空，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46501843/