javascript - 异步问题过滤器将不起作用，因为数组为空

Question

您好，我有一个异步问题，当我尝试过滤 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>

音频文件在过滤器之前是空的我该如何修复它以便在我对它进行过滤器之前音频文件在那里？？？

Answer 1

看起来你可以将更多的 .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
        })
      })

我们正在使用隐式返回。

这个:

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)，其中包含一些垃圾，因为音频文件可能有数据，也可能没有数据。合理的是，在大多数情况下，还没有任何值(value)。

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

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

} 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 block 之外。