javascript - 如何在 Promise 完成后调用 axios 中的数组元素

Question

我试图通过使用对 api 的 axios 调用填充数组来获取 font Awesome 图标在 d3 中绘制。我对 axios 的异步性质有疑问。当我记录数组时，我会显示所有要显示的元素，尽管当我调用单个元素时，它会返回未定义。

我想我看到了在整个数组上调用 console.log 的原因，因为 console.log() 也是异步的，所以当我调用整个数组时，它会等到所有元素完成加载。然后，当我调用单个元素时，它会立即调用。这就是为什么我相信当我调用整个数组时我可以看到元素。

我遇到的主要问题是，当我调用 axios.all 的 .then 函数中的元素时，要定义我的天气图标数组元素。

这就是我目前所拥有的......

axios.all(promises)
     .then(axios.spread((...args) => {
     for (let i = 0; i < args.length; i++) {
          weathericons[i] = args[i].data.fa;
     }
}))
// After everything is loaded from the server can we append our data
      .then(
          svg.append('svg:foreignObject') //d3 chart
          .data(options.labels)
          .attr('alt', "")
          .attr("height", xScale.bandwidth() > 100 ? 100 : xScale.bandwidth())
          .attr("width", xScale.bandwidth() > 100 ? 100 : xScale.bandwidth())
          .attr("transform", function(d, j) {
                    var height_adj = 60 * (xScale.bandwidth() > 1 ? 1 : xScale.bandwidth()) / 50;
                    return "translate(" + (xScale(options.labels[j]) + (xScale.bandwidth() / 2) - ((xScale.bandwidth() > 100 ? 100 : xScale.bandwidth()) / 2))
                        + "," + (yScale(0) - height_adj) + ") scale(" + (xScale.bandwidth() > 100 ? 100 : xScale.bandwidth()) / 50  + ")"
                })
           .append('i')
           .attr('class', function(d, j){
               return 'fa fa-' + weathericons[j] + '-o"'; //This is what i need to work
           })
       )

我试图让天气图标数组元素调用所有数据，以便我得到每个数据点的图标。我似乎想不出一个好的解决办法。

有没有办法在调用 .then 语句之前让数组完全填充？

Answer 1

你肯定犯了一个明显的错误，以svg.append()开头的整个表达式是第二个then()的第一个参数，但是的参数>then() 应该是一个函数。

像这样改变

axios.all(promises)
.then(axios.spread((...args) => {
    for (let i = 0; i < args.length; i++) {
         weathericons[i] = args[i].data.fa;
    }
}))
.then(() => {
    svg.append('svg:foreignObject')
    ...

})

但是由于您没有从第一个 then() 返回 promise (或任何与此相关的内容)，因此第二个是不必要的。你可以直接写

axios.all(promises)
.then(axios.spread((...args) => {
    for (let i = 0; i < args.length; i++) {
         weathericons[i] = args[i].data.fa;
    }

    svg.append ...
}))