Vue - axios - 处理相同的请求答案

【问题标题】：Vue - axios - handling same requestsVue - axios - 处理相同的请求
【发布时间】：2017-06-21 10:50:28
【问题描述】：

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

路线：

{ 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>

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

【问题讨论】：

标签： vue.js axios

【解决方案1】：

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

让我们逐个步骤，看看为什么会出现这个错误。

你加载了client:/id。
ClientReview 中的created 方法执行ajax 请求，并将self 分配给this。
ClientBar 中的mounted 方法执行ajax 请求，并重新将self 分配给this。请注意，这也更改了ClientReview 中的self 变量引用。
ClientReview ajax 完成并分配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 声明您的变量。

【讨论】：