Vue.js与Axios中如何将单个对象集合封装为目标数组结构

嘿，我完全懂你刚接触Axios和JavaScript时的这种困惑！把零散的单个对象打包成目标数组其实非常简单，根本不需要复杂的方法，下面就给你几种最直接的方案：

方案1：直接用数组字面量包裹（最直观） #

如果你已经通过Axios拿到了每一个单独的对象，比如把它们存在变量里，直接把这些对象放进[]里就行：

// 假设从Axios响应中取出的单个对象
const user1 = {user_no : 1, user_nickname : "hailey"};
const user2 = {user_no : 2 , user_nickname : "mandi"};
const user3 = {user_no : 3 , user_nickname : "loren"};
const user4 = {user_no : 4 , user_nickname : "james"};

// 包装成目标数组
const userList = [user1, user2, user3, user4];

方案2：用展开运算符快速转数组（适合可迭代集合） #

如果Axios返回的响应数据本身是一个可迭代的集合（比如类数组对象、或者接口返回的是多个对象的序列），用ES6的展开运算符...可以一键把它转成数组：

axios.get('/your-user-api')
  .then(response => {
    // 把响应中的可迭代对象直接展开成数组
    const userList = [...response.data];
    console.log(userList); // 就是你要的目标结构啦
  })
  .catch(err => console.log(err));

或者也可以用Array.from()达到同样的效果：

const userList = Array.from(response.data);

特殊情况：接口返回多行独立JSON对象 #

如果你的接口返回的是每行一个独立的JSON对象（不是标准的数组格式），那需要先处理响应文本，再转成数组：

axios.get('/your-api', { responseType: 'text' })
  .then(response => {
    // 把每行的对象字符串拼接成合法的数组JSON格式
    const validJson = `[${response.data.split('\n').filter(line => line.trim()).join(',')}]`;
    const userList = JSON.parse(validJson);
    console.log(userList);
  })

顺便提一句，你说的flat()方法确实是用来把多维数组“拍平”成一维的，和我们现在的需求刚好相反，所以不用考虑它～上面的几种方法都能轻松实现你要的包装效果，选最适合你当前响应数据情况的就行！

内容的提问来源于stack exchange，提问作者Mercy