Vue - axios - 处理相同的请求

Question

在我的项目中我有这样的结构：具有侧边栏、一般客户信息和儿童视图的路由器视图的客户端页面。

路线：

{ path: '/clients/:id', component: Client,
    children: [
      {
        path: '/',
        component: ClientReview,
        name: 'client-review'
      },
      {
        path: 'balances',
        component: ClientBalances,
        name: 'client-balances'
      },
      {
        path: 'report',
        component: MainReport,
        name: 'client-report'
      },

客户端组件（Client.vue）：

<template>
  <el-row>
    <client-menu></client-menu>
    <el-col class="client-view" :md="{ span: 22, offset: 2}" :sm="{ span: 20, offset: 4}" :xs="{ span: 18, offset: 6}">
      <client-bar></client-bar>
      <transition name="el-zoom-in-center">
        <router-view></router-view>
      </transition>
    </el-col>
  </el-row>
</template>

<script>
import ClientMenu from './ClientMenu.vue'
import ClientBar from './ClientBar.vue'

export default {
  data () {
    return {
      loading: false,
    };
  },
  components: {
    'client-menu': ClientMenu,
    'client-bar': ClientBar,
  }

}
</script>

ClientBar 组件（ClientBar.vue）：

<template>
  <div class="client-bar">
    <el-col :span="18">
      <h3>{{ client.Name }}</h3>
      <h4>{{ client.Address }}</h4>
    </el-col>
    <el-col :span="6" style="text-align: right;">
      <el-button-group>
        <el-button icon="edit" size="small"></el-button>
        <el-button icon="share" size="small"></el-button>
      </el-button-group>
    </el-col>
    <div class="clrfx"></div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      client: {}
    }
  },
  mounted () {
    this.loadClient()
  },
  methods: {
    loadClient: function() {
      self = this;
      this.axios.get('http://127.0.0.1:8020/clients/'+self.$route.params.id)
        .then(function(response) {
          self.client = response.data;
          self.loading = false;
        })
        .catch(function(error) {
          console.log(error);
        });
      }
    }
  }
</script>

我有 ClientReview 组件，它是 clients/:id 路由的根组件，并使用与 ClientBar 相同的 api 加载客户信息：

<template>
  <div>
    <el-row v-loading.body="loading">
      <el-col :span="12">
        <table class="el-table striped">
          <tr>
            <td class="cell">Полное наименование</td>
            <td class="cell">{{ clientInfo.FullName }}</td>
          </tr>
          <tr>
            <td class="cell">УНП</td>
            <td class="cell">{{ clientInfo.UNP }}</td>
          </tr>
          <tr>
            <td class="cell">ОКЭД</td>
            <td class="cell">{{ clientInfo.Branch.code }}<br>{{ clientInfo.Branch.name }}</td>
          </tr>
          <tr>
            <td class="cell">Адрес</td>
            <td class="cell">{{ clientInfo.Address }}</td>
          </tr>
          <tr>
            <td class="cell">Аналитик</td>
            <td class="cell">{{ clientInfo.Analytic.first_name }} {{ clientInfo.Analytic.last_name }}</td>
          </tr>
          <tr>
            <td class="cell">Менеджер</td>
            <td class="cell">{{ clientInfo.Manager.first_name }} {{ clientInfo.Manager.last_name }}</td>
          </tr>
        </table>
      </el-col>
      <el-col :span="12">
        <classification-report></classification-report>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import ClassificationReport from '../reports/ClassificationReport.vue'

export default {
  data () {
    return {
      loading: false,
      clientInfo: {}
    }
  },
  created () {
    this.Client();
  },
  methods: {
    Client: function() {
      self = this;
      self.loading = true;
      self.axios.get('http://127.0.0.1:8020/clients/'+self.$route.params.id)
        .then(function(response) {
          self.clientInfo = response.data;
          self.loading = false;
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  },
  components: {
    'classification-report': ClassificationReport
  }
}
</script>

问题是当我第一次加载页面 client/:id 或刷新页面时，ClientReview 中的客户端数据没有加载。该组件已呈现（正如我在 Vue Devtools 中看到的那样），并且向服务器发送了两个请求，但 ClientReview 中的 clientInfo 对象仍然为空。如果我转到余额或报告页面，然后转到客户审查页面，则所有内容都已加载。希望有人能帮助我。

Answer 1

这是因为self恰好是对window对象的另一个引用，并且在所有模块中都可用。

让我们逐步完成这些步骤，看看为什么会出现此错误。

你加载了 client:/id.
ClientReview中的created方法做ajax请求，并将self赋值给this。
ClientBar中的mounted方法做ajax请求，再赋值self给this .请注意，这也更改了 ClientReview 中的 self 变量引用。
ClientReviewajax完成分配self.clientInfo = response.data;。由于 self 是对 ClientBar 的引用，并且 ClientBar 未将 clientInfo 声明为根数据属性，因此此赋值不执行任何操作。
ClientBar ajax 完成并分配 self.client = response.data;，有效。
您的路线远离 ClientReview。
您返回 ClientReview。重复步骤 2。
ClientReview 渲染成功，因为 ClientBar 已经渲染，并且没有重新分配 self.

答案是 let self = this 而不是 self = this。

教训是总是用var、let或const声明你的变量。

Vue - axios - 处理相同的请求

Vue - axios - handling same requests

vue.js

axios