vue.js - 在 VueJS 组件混合中使用时，Axios 拦截器无法正常运行

Question

我们所有的服务器 API 资源都以 JSON 对象的形式返回，如下所示:

{
  data: {
    ... Business data from the controller
  }
  meta: {
    ... meta data added by middleware
  }
}

这个想法是将元数据添加到 json 响应中，可用于更新 vuex 存储数据。效果很好，即使我们正在逐步淘汰它以用 pushe 代替它以更轻松地保持我们的客户端状态最新，我们仍然有从服务器返回的包装数据对象。

基本上，我们有一个 axios 拦截器来处理响应的元部分，然后只抛出原始数据以供任何 vuejs 组件处理。

这就是理论。这就是它的工作原理。

引导 Axios

Axios 被引导到应用程序中，如下所示:

window.axios = require('axios');
Vue.prototype.$http = axios;

请注意，我们过去用 axios 替换了 Vue 资源。 反正。这基本上是在任何其他代码之前完成的。

下一部分是添加拦截器:

引导拦截器

axios.interceptors.response.use(
  (response) => {
    window.app.$emit('update-meta-data', response.data.meta);
    response.data = response.data.data;
    return response;
  },
  (error) => {
    ... error handling goes here
  }
);

常规组件

在任何常规组件中，我们可以执行以下操作:

this.$http.get();

结果是 - 对于我的组件 - 元位被拦截器正确剥离。工作出色。

...但是有一个mixin

我还有一个包含在组件中的混合；然而，在这些情况下，拦截器不起作用。

这是混合代码:

module.exports = {
  mounted: function() {
    this.$http.get('/resource').then(
      (response) => {
        ... here I expect to be able to do response.data
        ... but the response.data contains the original json object
        ... including both data and meta properties
      }
    )
  }
}

mixin包含在一个组件中如下:

<script>
  module.exports = {
    mixins:[require('../mixins/repository.js')],
    ...
  }
</script>

将 mounted 方法从 mixin 移动到实际组件时，它按预期工作。我不明白为什么。

我虽然那是因为 this.$http 可能是另一个没有拦截器的对象，但事实并非如此，因为当我在拦截器中添加 console.log() devug 打印时，我看到对于我在混音中的调用，它确实遵循了它的逻辑。唯一的区别似乎是 response.data 似乎没有设置为原始响应的 response.data.data。

我希望这一切都有意义。

感谢您的协助!

Answer 1

好的。 我真的很困惑，但终于找到了我的问题。 从服务器返回的数据并不像我预期的那样，而是嵌套在一个额外的数据对象中。 VueJS/Axios 代码完成了我预期的工作；我只是没想到这个服务器资源会错误地包装它两次。

感谢那些花时间阅读这个问题的人。 祝你有美好的一天!