javascript - axios 响应格式对象与数组

Question

我正在使用 axios/vue 来获取一些数据，目前其中一些调用是手动设置的。我需要自动化所有这些，我几乎成功了，但我得到的数据不正确。

这是我当前的“手动”设置:

let linksArr = ['abc.json','def.json'];
axios
    .all(linksArr.map(l => axios.get(l)))
    .then(
      axios.spread(function(abc, def) {
        var merged = [...abc.data, ...def.data]
      })
    )

通过此设置我得到了这样的响应:

(2) [{…}, {…}]
0: {}
1: {}

但是当我将其更改为像这样更“自动”的内容时( linksArr 是动态的并且可能很长):

let linksArr = ['abc.json','def.json'];
axios
   .all(linksArr.map(l => axios.get(l)))
   .then(
     responses => {
       var merged = [].concat(responses.map(res => res.data));
     }
   );

我收到此响应(注意 [{}]):

(2) [Array(1), Array(1)]
0: [{…}]
1: [{…}]

我想保持相同的响应格式(对象与数组)，但我不知道如何做到这一点...

谢谢。

Answer 1

在后一个示例中，您的回调有一个错误。您在原始代码中所做的是连接扩展项(...ARG.data)，而在后面的代码中您缺少这部分。请检查以下工作示例:

let linksArr = ['abc.json','def.json'];
axios
   .all(linksArr.map(l => axios.get(l)))
   .then(responses => {
     const merged = responses
      .map(r => r.data)
      .reduce((acc, item) => [...acc, ...item], []);
   });

https://codesandbox.io/s/j25l1n7835