为什么在用JavaScript中的异步函数填充数组时array.length不起作用

Question

我正在学习WebAudio API。 我正面临一个问题。 基本上这里的事情是异步的...所以我有点困惑。 请帮助。这是我的代码：-

//"use strict";

var sources = new Array();
var actx;
var songs = ['src1.mp3', 'src2.mp3'];

async function start() {
  console.log("WELCOME!!");
  try {
    actx = new AudioContext();
  } catch (e) {
    console.log('WebAudio api is not supported!!');

  }
  await getBuffers(actx, songs);
  console.log(sources);
  console.log(sources.length);
}

function load_song(url) {
  let promise = new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';
    request.onload = () => {
      let audioData = request.response;
      resolve(audioData);
    }
    request.onerror = () => {
      reject(new error("Could not load the song:- " + url));
    }

    request.send();
  });
  return promise;
}
//creats buffers
async function getBuffers(actx, songs) {
  // let buffer_list = new Array();

  for (let x = 0; x < songs.length; x++) {
    let temp = actx.createBufferSource();
    await load_song(songs[x]).then((audioData) => {
      actx.decodeAudioData(audioData).then((decodedAudioData) => {
        temp.buffer = decodedAudioData;
        sources.push(temp);
      }).catch((error) => {
        console.error(error);
      });
    });
  }
  //console.log(buffers.length);
}
async function play() {
  //start();
  sources[0].start(0);
  //sources[1].start(0);
}

function stop() {
  sources[0].stop(0);
  //sources[1].stop(0);
}

在这两行中console.log(sources)和console.log(sources.length) 。 结果在这里。 为什么console.log(sources.length)为0？
请帮助我........谢谢你。

Answer 1

你需要回来

actx.decodeAudioData(audioData).then((decodedAudioData) => {

由于您没有退货，因此您无需await 。 因此，日志会在数组填充之前出现，但是console.log(sources)是活动的，因此您可以看到最新的更改。

当您await各处使用await时，此类错误不太可能发生，并且这也更易于阅读IMO：

async function getBuffers(actx, songs) {
  const sources = [];  //mutating a global variable isnt good, so lets make it local
  for (const song of songs) { //for...of is so beautiful, why dont you use it?
   try { //this is similar to .catch
    let temp = actx.createBufferSource();
    const audioData = await load_song(song);

    const decodedAudioData =  await actx.decodeAudioData(audioData);
    temp.buffer = decodedAudioData;
    sources.push(temp);
   } catch(e){ console.error(e); } //okay that does not count as an error handler...
  }
  return sources; //getBuffers implies that it returns sth
}

Answer 2

您应该将getBuffers代码更改为类似以下内容

async function getBuffers(actx, songs) {
    try {
        for (let song of songs) {
            let temp = actx.createBufferSource();
            var audioData = await load_song(songs[x])
            var decodedAudioData = await actx.decodeAudioData(audioData)
            temp.buffer = decodedAudioData;
            sources.push(temp);
        }
    } catch (e) { console.log(e) }
}