如何从 axios 响应对象中的所有项目中提取特定值到 aa vuex 状态

Question

这让我发疯！

我有一个 axios 调用在控制台中返回一个 json 数组对象 - 检查！

>(100) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
>0:
id: 54892250
iid: 1001
ref: "master"
sha: "63e3fc014e207dd4e708749cee3e89a1aa416b7d"
created_at: "2020-03-05T18:57:02.793Z"
updated_at: "2020-03-05T19:06:27.651Z"
>user: {id: someuserid, name: "someuser", username: "someusername", state: "active", avatar_url: "https://assets.gitlab-static.net/uploads/-/system/user/avatar/4534925/avatar.png", …}
>environment: {id: 123456, name: "somename", slug: "somename-iw5iqp", external_url: "https://someaddress.com"}
>deployable: {id: someid, status: "success", stage: "deploy", name: "deploy-staging", ref: "master", …}
status: "success"
__proto__: Object
>1: {id: 54804365, iid: 1000, ref: "filter-out-expired-items", sha: "6225d8018c86fa906063aeea5c10c710ddced14c", created_at: "2020-03-05T12:25:18.949Z", …}
>2: {id: 54804175, iid: 999, ref: "master", sha: "aa5e50c50ba95e9b16cbc57fb968bf9075c625b2", created_at: "2020-03-05T12:24:02.284Z", …}
>3: {id: 54801934, iid: 998, ref: "filter-out-expired-items", sha: "4fc2

现在我需要用这个结果做两件事：

1. 当完全扩展时，这种反应是很大的——而且有成千上万。而不是在 vuex 状态中存储 1000 个巨大的 json 响应 - 我想首先只提取我们关心的值，如下所示：
   • ID
   • 参考
   • 环境名称
   • 地位
   • 可部署标签

类似于：

{ "id": id, "ref": ref, "environment": environment.name, "status": status, "tag": deployable.tag, }

我该怎么做呢？

2. 此响应在许多页面上分页 以上只是一个页面结果的部分示例。

我有一个工作循环，我正在获取所有这些的 console.log。但是我需要做的是在提交状态之前连接所有页面（现在已剥离到上述字段）。如果尝试过对象复制，推送到数组和各种向世界充满希望的实用程序 - 但我无法让它们中的任何一个工作:)

所以总结一下：

1. 获取页面结果
2. 将数组中的项压缩为简化版本
3. 将它们全部收集到我可以插入状态的对象中

循环的相关部分

  // Use headers to get the number of pages
  const pages = await axios.head(url, options)
    .then((response) => response.headers['x-total-pages']);
  console.log('pages=', pages); // DEBUG
  // Loop through and push them to an array
  for (let i = 0; i <= pages; i += 1) {
    console.log('i=', i);
    options = {
      headers: {
        'Private-Token': token,
      },
      params: {
        order_by: 'created_at',
        sort: 'desc',
        per_page: 100,
        page: i,
      },
    };
    axios.get(url, options)
      .then((result) => { console.log(result.data); })
  }

Answer 1

为总结果创建一个数组：

const results = [];

在您记录的位置，解析每个单独的结果：

result.data.forEach(item => {
  results.push({
     id: item.id,
     ref: item.ref,
     environment: item.environment.name,
     status: item.status,
     tag: item.deployable.tag
  });
});

for请注意，使用普通循环代替可能是一种性能优化forEach。