【发布时间】：2018-01-12 08:42:28
【问题描述】：
我有一个表格，其中包含来自多个来源（网站）的信息。每一行都是不同的来源。用户可以通过单击刷新图标来刷新每个单独的行/源/网站的数据，或者，用户可以通过单击标题行中的刷新图标来更新所有行。
刷新时，脚本实际上会登录每个网站并获取实时数据，而不是从数据库中获取陈旧数据。
当用户单击标题行中的刷新 ALL 图标时，我希望在数据到来时更新每一行。
这是我目前的结构。它确实会更新表格，但仅在每一行都完成时才更新。
- Vuejs
- Laravel Spark（使用
$http.get） - Laravel 5.3.31
...
Vue.component('websites', {
// props: [''],
/**
* The components data
*/
data() {
return {
userLbProfiles: [],
spin_icon_many: false,
showRefreshButton: '',
refreshTime: '',
busy: '',
changeStatus: '',
};
},
/**
* Bootstrap the component
. */
mounted() {
var self = this;
this.fetchLastRefreshTime();
this.getData();
this.busy = false;
this.showRefreshButton = true;
},
/**
* Component's methods
*/
methods: {
/**
* get current stored data from the DB
*
* @return response
*/
getData() {
this.changeStatus = true;
this.$http.get('/get/all/userLbProfiles')
.then(function (response) {
console.log(response);
this.userLbProfiles = response.data;
this.busy = false;
this.spin_icon_many = false;
this.changeStatus = false;
})
},
/**
* get only ONE row from the DB
*
* @return response
*/
getDataForOne(userLbProfileId, i) {
this.changeStatus = true;
this.$http.get('/get/one/userLbProfile/'+userLbProfileId)
.then(function (response) {
console.log(response);
this.userLbProfiles[i] = response.data;
console.log(this.userLbProfiles[i]+'number: '+i);
this.busy = false;
this.userLbProfiles[i].spin_icon = false;
this.changeStatus = false;
})
},
/**
* Call the api to log into one website and fetch the live data
*
*/
refreshOne(userLbProfileId,i) {
this.userLbProfiles[i].spin_icon= true;
this.busy = true;
this.$http.get('/get/refresh/one'+userLbProfileId)
.then(function (response) {
console.log(response);
this.getDataForOne(userLbProfileId,i);
// this.getData();
})
},
/**
* Call the api to log into and update the specified # of websites
* next in the list
*
*/
refreshMany() {
this.spin_icon_many = true;
this.busy = true;
for(i=0; i <= this.userLbProfiles.length-83; i++) {
this.userLbProfiles[i].spin_icon= true;
this.$http.get('/get/refresh/many'+this.userLbProfiles[i].id)
.then(function (response) {
console.log('got response after fetching refresh data for: '+this.userLbProfiles[i].id);
console.log(response);
});
}
},<get-website-data inline-template>
<div class="panel panel-default">
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<form class="form-horizontal" role="form">
<table class="table table-hover">
<tr>
<th>Data Item 1</th>
<th>Data Item 2</th>
<th>
<form>
<a href=""
@click.prevent="refreshMany()">
<i v-if="spin_icon_many"
class="fa fa-fw fa-refresh fa-spin fa-2x">
</i>
<i v-else
class="fa fa-fw fa-refresh fa-2x">
</i>
</a>
</form> -->
<i class="fa fa-fw fa-refresh fa-2x">
</th>
<th>Last Update</th>
</tr>
<tr v-for="(userLbProfile, index) in userLbProfiles">
<td>
@{{ dataItem1 }}
</td>
<td>
@{{ dataItem2 }}
</td>
etc..这段代码发生的事情是（显然）for循环运行 在我得到任何回应之前出去。每个请求的范围为 3-15 秒。
如果有 10 个网站，假设有 10 个 AJAX 调用出去
但是第一个 .then 块（从 db 调用 getData）直到所有 10 个其他 async 调用完成后才处理，甚至
如果我能看到它在控制台中打印的响应。
我认为 .then 会单独处理
对于那个回应，但不知何故他们都知道彼此？
可能是for 循环？
我还尝试调用getDataForOne 认为它可能会更新该行
并欺骗它立即更新，但我没有让 Vue 更新
识别数据已更改（也许这是正确的做法？）
非常感谢您提供任何帮助，这已经持续数周了。
【问题讨论】：
-
用
getDataForOne调用替换循环的内容，这样逻辑不会在循环中处理，而是在getDataForOne 方法中处理 -
问题在于每个请求需要 3-15 秒（我更新了我的帖子以澄清）所以你的建议会从数据库运行 getData 但该数据尚未更新并且不会直到异步调用完成。
标签： jquery ajax laravel vue.js laravel-spark