Vue.js从对象数组获取数据遇阻：API/axios/proxy相关问题

你遇到的这个问题其实和API代理服务器关系不大，主要是Vue的响应式系统在起作用——Vue 3会把组件内的响应式数据自动包装成Proxy对象，直接打印时可能会显示出一些看起来异常的属性，导致你误以为数据结构或值不对。

下面给你几个可行的解决思路：

1. 先把Proxy对象转成普通对象查看真实数据 #

你可以通过序列化再反序列化的方式，把Proxy对象转换成普通对象，这样就能看到最原始的数据结构了：

axios.get(proxyurl + history_url, { reqHeaders })
  .then((response) => {
    // 先将响应数据转为普通对象，方便查看真实结构
    const rawResponse = JSON.parse(JSON.stringify(response.data));
    console.log(rawResponse);
    
    const historyArr = rawResponse.data.history;
    // 先判断数组是否为空，避免索引越界报错
    if (historyArr.length > 0) {
      this.lastItem = historyArr[historyArr.length - 1];
      // 同样转成普通对象查看真实的lastItem内容
      console.log(JSON.parse(JSON.stringify(this.lastItem)));
      this.lastEvol = this.lastItem.price;
      console.log(this.lastEvol);
    }
  })

如果你用的是Vue 3，还可以直接用官方提供的toRaw方法获取原始对象（需要先导入）：

import { toRaw } from 'vue';

// ...
this.lastItem = historyArr[historyArr.length - 1];
console.log(toRaw(this.lastItem)); // 直接拿到未被Proxy包装的原始对象

2. 检查数组索引是否存在变量混淆 #

你代码里写的history.length-1，这里的history是不是你想引用的response.data.data.history？如果history是组件内的其他同名变量，很可能会导致索引错误。建议直接使用response.data.data.history.length - 1，避免变量名混淆带来的问题。

3. 确保异步数据的响应式更新 #

有时候即使拿到了正确的数据，Vue的响应式更新可能存在微小延迟。如果是在模板中使用lastEvol，直接赋值给组件data里的变量就没问题；如果是想在控制台确认最新值，可以用nextTick确保DOM更新后再查看：

this.lastEvol = this.lastItem.price;
this.$nextTick(() => {
  console.log(this.lastEvol); // 确保拿到响应式更新后的值
});

试一下这些方法，应该就能顺利解决Proxy对象带来的困扰，拿到正确的price属性啦～

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