Vue.js新手求助：如何用Axios将响应数据映射为二维数组/对象

Hey there! 作为Vue.js初学者，把接口返回的数据转成想要的格式确实需要一点点小调整，我来帮你把映射逻辑完美整合到你的Axios请求里～

针对你想要的两种目标格式，分别给你完整的可直接复用的实现方案：

方案1：映射为二维数组格式 #

这种格式非常适合直接绑定到表格组件（不管是原生<table>还是UI库的表格组件），每个子数组对应表格的一行两列：

getResultcivitas(localisation) {
  axios.get('../api/civitasorigine/' + this.searchInputcivitas)
    .then(response => {
      // 遍历接口返回的数组，把每个对象转成 [origine值, nb值] 的子数组
      this.origines = response.data.map(item => [item.origine, item.nb]);
    })
    .catch(error => {
      // 别忘了加上错误处理哦，初学者很容易忽略这一步
      console.error('请求获取数据失败:', error);
    });
}

执行后，this.origines就会变成你期望的二维数组：

[ ['', 15], ['?', 18], ['?L', 1], ['G', 298], ['I', 51], ['L', 1735], ['L?', 1], ['O', 4 ] ]

方案2：映射为单个键值对对象 #

如果你需要把origine作为键名、nb作为对应值的单个对象，这里要注意：你之前找到的map代码会生成多个独立对象的数组，而不是你想要的单个大对象。我们可以用reduce方法来合并数组元素：

getResultcivitas(localisation) {
  axios.get('../api/civitasorigine/' + this.searchInputcivitas)
    .then(response => {
      // 用reduce遍历数组，把每个item的origine和nb合并到同一个对象里
      this.origines = response.data.reduce((resultObj, currentItem) => {
        resultObj[currentItem.origine] = currentItem.nb;
        return resultObj;
      }, {}); // 初始值是一个空对象，用来存放最终的键值对
    })
    .catch(error => {
      console.error('请求获取数据失败:', error);
    });
}

执行后，this.origines就会变成你想要的键值对对象：

{ "":15, "?":18, "?L":1, "G":298, "I":51, "L":1735, "L?":1, "O":4 }

额外小提示 #

• 错误处理很重要：加上catch可以在请求失败时给出反馈，避免页面“静默失败”
• 如果是Vue 3 Composition API，逻辑完全一致，只需要把this.origines换成用ref或reactive声明的响应式变量即可
• 二维数组更适合表格渲染场景，而键值对对象更适合快速通过origine值查找对应的nb数值

内容的提问来源于stack exchange，提问作者Léo-Paul Dubourg