Axios GET 请求返回 [代理代理]，如何访问原始数据？

Axios GET 请求返回 [代理代理] 的解决方法

理解代理对象

在 JavaScript 中，代理对象 可以拦截和修改对另一个对象的访问。当使用 Axios 进行请求时，响应数据被包装在一个代理对象中。这意味着，当你尝试访问响应数据的属性或方法时，实际上是通过代理对象进行的。

访问原始数据

为了访问原始数据，你需要取消代理。使用Object.values()方法可以实现此目的。该方法将代理对象中的所有值提取到一个数组中。

代码修改

在你的代码中，对以下代码进行修改：

axios.get(URL + "/KPI/get_by_category/1").then(response=>{
  for (const data in response.data) {
      this.kpi_kalite.push(JSON.parse(JSON.stringify(response.data[data])))
      console.log(Object.values(this.kpi_kalite))
   }  
   .
   .
   .

更改为：

axios.get(URL + "/KPI/get_by_category/1").then(response=>{
  for (const data in response.data) {
      this.kpi_kalite.push(Object.values(response.data[data]))
      console.log(Object.values(this.kpi_kalite))
   }  
   .
   .
   .

这将直接将原始数据值推送到kpi_kalite数组中。

在组件中访问数据

在组件的mounted()方法中，使用以下代码访问数据：

mounted() {
  console.log(this.kpi_kalite[0])
  console.log(this.kpi_kalite)
},

这将正确打印原始数据对象和数组。

常见问题解答

1. 为什么会遇到 [代理代理] 响应？

响应数据被包装在一个代理对象中，以拦截和修改对数据的访问。

2. 什么是取消代理？

取消代理涉及使用Object.values()方法从代理对象中提取原始数据值。

3. 为什么需要修改代码？

修改代码是为了直接将原始数据值推送到组件的数组中，避免类型问题。

4. 如何在组件中访问数据？

在组件的mounted()方法中使用console.log()来打印原始数据对象和数组。

5. 取消代理有什么其他好处？

取消代理可以提高性能，因为直接访问原始数据比通过代理对象访问更快。

结论

通过取消代理对象并使用Object.values()方法，你可以正确访问 Axios GET 请求的响应数据。这将确保你在组件中使用数据时不会遇到类型问题。