Vue.js Vue-axios-处理相同的请求_Vue.js_Axios

Vue.js Vue-axios-处理相同的请求

vue.js

Vue.js Vue-axios-处理相同的请求,vue.js,axios,Vue.js,Axios,在我的项目中，我有这样的结构：客户端页面，其中包含侧栏、常规客户端信息和子视图的路由器视图路线： { path: '/clients/:id', component: Client, children: [ { path: '/', component: ClientReview, name: 'client-review' }, { path: 'balances',

在我的项目中，我有这样的结构：客户端页面，其中包含侧栏、常规客户端信息和子视图的路由器视图

路线：

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


从“./ClientMenu.vue”导入ClientMenu
从“./ClientBar.vue”导入ClientBar
导出默认值{
数据（）{
返回{
加载：false，
};
},
组成部分：{
“客户端菜单”：客户端菜单，
“客户端栏”：客户端栏，
}
}

ClientBar组件（ClientBar.vue）：


{{client.Name}
{{client.Address}
导出默认值{
数据（）{
返回{
客户：{}
}
},
挂载（）{
这是loadClient（）
},
方法：{
loadClient:function（）{
self=这个；
这个.axios.gethttp://127.0.0.1:8020/clients/“+self.$route.params.id）
.然后（功能（响应）{
self.client=response.data；
自加载=错误；
})
.catch（函数（错误）{
console.log（错误）；
});
}
}
}

我还有ClientView组件，它是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>


Полное наименование
{{clientInfo.FullName}
УНП
{{clientInfo.UNP}
ОКЭД
{{clientInfo.Branch.code}}
{{{clientInfo.Branch.name}
Адрес
{{clientInfo.Address}
Аналитик
{{clientInfo.analysis.first_name}{{{clientInfo.analysis.last_name}
Менеджер
{{clientInfo.Manager.first_name}{{{clientInfo.Manager.last_name}
从“../reports/ClassificationReport.vue”导入ClassificationReport
导出默认值{
数据（）{
返回{
加载：false，
clientInfo:{}
}
},
创建（）{
这个.Client（）；
},
方法：{
客户机：函数（）{
self=这个；
自加载=真；
self.axios.gethttp://127.0.0.1:8020/clients/“+self.$route.params.id）
.然后（功能（响应）{
self.clientInfo=response.data；
自加载=错误；
})
.catch（函数（错误）{
console.log（错误）；
});
}
},
组成部分：{
“分类报告”：分类报告
}
}

问题在于，当我第一次加载页面客户端/：id时，或者在ClientView中刷新页面客户端的数据时，没有加载。该组件被呈现（正如我在Vue Devtools中看到的），并且向服务器发送了两个请求，但ClientView中的clientInfo对象仍然为空。如果我进入余额或报告页面，然后进入客户审核页面，所有内容都会加载。

希望有人能帮助我。

这是因为

self

恰好是

窗口

对象的另一个引用，并且在所有模块中都可用

让我们遍历这些步骤，看看为什么会发生此错误

您可以加载

客户端：/id

ClientReview

中创建的

方法执行ajax请求，并将self
分配给this


ClientBar
中的mounted
方法执行ajax请求，并且re将self
分配给此
。请注意，这也更改了ClientReview
中的self
变量引用
ClientReview
ajax完成并分配self.clientInfo=response.data。由于self
是对ClientBar
的引用，并且ClientBar
没有将clientInfo
声明为根数据属性，因此此赋值不起任何作用

ClientBar
ajax完成并分配self.client=response.data，有效

您从ClientReview
出发
您将返回到ClientReview
。重复步骤2
ClientReview
已成功渲染，因为ClientBar
已渲染，并且未重新分配self
答案是做让self=this
而不是self=this

课程是始终使用var
、let
或const
声明变量
 这是因为self
恰好是窗口
对象的另一个引用，在所有模块中都可用
让我们遍历这些步骤，看看为什么会发生此错误
您可以加载客户端：/id
ClientReview
中创建的方法执行ajax请求，并将self
分配给this

ClientBar
中的mounted
方法执行ajax请求，并且re将self
分配给此
。请注意，这也更改了ClientReview
中的self
变量引用
ClientReview
ajax完成并分配self.clientInfo=response.data。由于self
是对ClientBar
的引用，并且ClientBar
没有将clientInfo
声明为根数据属性，因此此赋值不起任何作用

ClientBar
ajax完成并分配self.client=response.data，有效

您从ClientReview
出发
您将返回到ClientReview
。重复步骤2
ClientReview
已成功渲染，因为ClientBar
已渲染，并且未重新分配self<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>

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