javascript - Promise.All 解决永远不会被 forEach 调用

Question

下午好，我有这段代码来处理 HTTP 请求响应

// original code: const data = res.data.data;
const data_ = {
  success: true,
  data: {
    ocupacao_baixa: { count: [], rows: [] },
    ocupacao_moderada: { count: [], rows: [] },
    ocupacao_elevada: {
      count: [{ date_part: 13, count: "1" }],
      rows: [{ date_part: 13 }],
    },
  },
};
const data = data_.data;

let horas = new Array(24).fill([0, 0, 0, 0]);
console.log("DEBUG:horas0", horas);

let getOcupacaoBaixa = new Promise((resolve, reject) => {
  data.ocupacao_baixa.count.forEach((element, index, array) => {
    console.log("DEBUG:element", element);
    console.log("DEBUG:horas1", horas);
    console.log(
      "DEBUG:horas[" + element.date_part + "]",
      horas[element.date_part]
    );

    horas[parseInt(element.date_part)][1] = parseInt(element.count);
    if (index === array.length - 1) resolve();
  });
});
let getOcupacaoModerada = new Promise((resolve, reject) => {
  data.ocupacao_moderada.count.forEach((element, index, array) => {
    console.log("DEBUG:element", element);
    console.log("DEBUG:hora2s", horas);
    console.log(
      "DEBUG:horas[" + element.date_part + "]",
      horas[element.date_part]
    );
    horas[parseInt(element.date_part)][2] = parseInt(element.count);
    if (index === array.length - 1) resolve();
  });
});
let getOcupacaoElevada = new Promise((resolve, reject) => {
  data.ocupacao_elevada.count.forEach((element, index, array) => {
    console.log("DEBUG:element", element);
    console.log("DEBUG:horas3   ", horas);
    console.log(
      "DEBUG:horas[" + element.date_part + "]",
      horas[element.date_part]
    );
    horas[parseInt(element.date_part)][3] = parseInt(element.count);
    if (index === array.length - 1) resolve();
  });
});
Promise.all([getOcupacaoBaixa, getOcupacaoModerada, getOcupacaoElevada]).then(
  () => {
    console.log("DEBUG:dadosMostrar");
    let dadosMostrar = [...horas];
    dadosMostrar.forEach((a, i, arr) => {
      let b = [...arr[i]];
      b.shift();
      arr[i] = [i.toString(), ...b];
    });
    this.setState({ dadosMostrar: dadosMostrar });
  }
);

我使用 Promise.all 是因为我想确保dadosMostrar分配之前完成的所有 forEach 循环，但永远不会调用解析回调。它正在获取有效数据，如上面的示例代码 ( data)。

我不知道问题可能出在哪里，但我总是在等待 forEach 循环时发生这种情况。

标签： javascriptpromise

Answer 1

问题是如果数组为空，if (index === array.length - 1) resolve();它将永远不会运行。count

然而，你的代码中没有任何东西是异步的，所以绝对没有理由使用 Promise。让它同步执行：

const data = res.data.data;
let horas = new Array(24).fill([0, 0, 0, 0]);
console.log("DEBUG:horas0", horas);
data.ocupacao_baixa.count.forEach((element, index, array) => {
    console.log("DEBUG:element", element);
    console.log("DEBUG:horas1", horas);
    console.log(
        "DEBUG:horas[" + element.date_part + "]",
        horas[element.date_part]
    );

    horas[parseInt(element.date_part)][1] = parseInt(element.count);
});
data.ocupacao_moderada.count.forEach((element, index, array) => {
    console.log("DEBUG:element", element);
    console.log("DEBUG:hora2s", horas);
    console.log(
        "DEBUG:horas[" + element.date_part + "]",
        horas[element.date_part]
    );
    horas[parseInt(element.date_part)][2] = parseInt(element.count);
});
data.ocupacao_elevada.count.forEach((element, index, array) => {
    console.log("DEBUG:element", element);
    console.log("DEBUG:horas3   ", horas);
    console.log(
        "DEBUG:horas[" + element.date_part + "]",
        horas[element.date_part]
    );
    horas[parseInt(element.date_part)][3] = parseInt(element.count);
});
console.log("DEBUG:dadosMostrar");
let dadosMostrar = [...horas];
dadosMostrar.forEach((a, i, arr) => {
    let b = [...arr[i]];
    b.shift();
    arr[i] = [i.toString(), ...b];
});
this.setState({ dadosMostrar: dadosMostrar });