时间戳

首页 > 解决方案 > 分配 Nuxt Axios 响应变量更改响应数据内容

javascript - 分配 Nuxt Axios 响应变量更改响应数据内容

问题描述

async fetch() {
    try {
      console.log(await this.$api.events.all(-1, false)); // <-- First log statement
      const res = await this.$api.events.all(-1, false); // <-- Assignment
      console.log(res); // <-- Second log statement
      if (!this.events) {
        this.events = []
      }
      res.data.forEach((event, index) => {
        const id = event.hashid;
        const existingIndex = this.events.findIndex((other) => {
          return other.hashid = id;
        });
        if (existingIndex == -1) {
          this.events.push(events);
        } else {
          this.events[existingIndex] = event;
        }
      });
      for (var i = this.events.length - 1; i >= 0; --i) {
        const id = this.events[i].hashid
        const wasRemoved =
          res.data.findIndex((event) => {
            return event.hashid == id
          }) == -1
        if (wasRemoved) {
          this.events.splice(i, 1)
        }
      }
      this.$store.commit('cache/updateEventData', {
        updated_at: new Date(Date.now()),
        data: this.events
      });
    } catch (err) {
      console.log(err)
    }
  }

// The other functions, maybe this somehow helps

async function refreshTokenFirstThen(adminApi, func) {
  await adminApi.refreshAsync();
  return func();
}

all(count = -1, description = true) {
  const func = () => {
    return $axios.get(`${baseURL}/admin/event`, {
      'params': {
        'count': count,
        'description': description ? 1 : 0
      },
      'headers': {
        'Authorization': `Bearer ${store.state.admin.token}`
      }
    });
  }
  if (store.getters["admin/isTokenExpired"]) {
      return refreshTokenFirstThen(adminApi, func);
  }
  return func();
},

即使预期相同的结果，两个日志语句给出的结果也略有不同。但这仅在使用此特定组件中的功能时才会发生。在其他组件中使用相同的功能时，一切都按预期工作。

第一个数据输出：

[
  {
    "name": "First Name",
    "hashid": "VQW9xg7j",
    // some more correct attributes
  },
  {
    "name": "Second name",
    "hashid": "zlWvEgxQ",
    // some more correct attributes
  }
]

而第二个console.log给出以下输出：

[
  {
    "name": "First Name",
    "hashid": "zlWvEgxQ",
    // some more correct attributes, but this time with reactiveGetter and reactiveSetter
    <get hashid()>: reactiveGetter()
​​        length: 0
​​​​        name: "reactiveGetter"
​​​​        prototype: Object { … }
        ​​​​&lt;prototype>: function ()
    ​​​&lt;set hashid()>: reactiveSetter(newVal)
        ​​​​length: 1
        ​​​​name: "reactiveSetter"
        ​​​​prototype: Object { … }
        ​​​​&lt;prototype>: function ()
  },
  {
    "name": "Second name",
    "hashid": "zlWvEgxQ",
    // some more correct attributes and still without reactiveGetter and reactiveSetter
  }
]

可以看出，hashid在分配函数调用的响应时，我的属性值会以某种方式发生变化。

这里发生的下一个奇怪的行为是，hashid字段更改的第一个对象也得到reactiveGetter和reactiveSetter（但数组中的第二个对象没有得到这些）。

所以在我看来，我不知道的任务正在发生一些事情。另一种猜测是这与 Vuex 商店有关，因为我没有在使用相同功能的其他地方更改 Vuex 撕裂。

已验证后端始终发送正确的数据，因为这是虚拟数据，由一个数组组成，该数组包含两个具有某些属性的对象。因此，除了这两个对象之外，没有其他数据。

有人可以向我解释为什么会发生这种行为吗？

标签： javascriptvue.jsaxiosnuxt.js

解决方案

有几个问题...

  1. 不要console.log与对象一起使用。浏览器倾向于显示对象的“实时视图” -参考

  2. this.events.findIndex((other) => { return other.hashid = id; });错了，您使用的是赋值运算符 ( =) 而不是标识运算符 ( ===)。这就是为什么hashid第一个元素的变化......

推荐阅读