Несколько вызовов $http.get должны обновлять строки по мере их поступления
У меня есть таблица, которая содержит информацию из нескольких источников (веб-сайтов). Каждая строка - это другой источник. Пользователь может обновить данные для каждой отдельной строки / источника / веб-сайта, щелкнув значок обновления, или пользователь может обновить ВСЕ строки, щелкнув значок обновления в строке заголовка.
При обновлении скрипт на самом деле регистрируется на каждом веб-сайте и получает текущие данные против получения устаревших данных из БД.
Я хотел бы, чтобы каждая строка обновлялась по мере поступления данных, когда пользователь нажимает значок обновления ВСЕ в строке заголовка.
Вот как я структурировал вещи в настоящее время. Это действительно обновляет таблицу, но только когда каждая строка завершена.
- 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 (который вызывает getData
из БД) не обрабатывается, пока ВСЕ 10 других async
вызовы завершены, даже если я вижу ответ, который он печатает в консоли.
Я думаю, что потом обработать этот ответ индивидуально, но каким-то образом они все знают друг о друге? Вероятно, for
цикл?
Я тоже пробовал звонить getDataForOne
думая, что это может обновить строку и обмануть ее в обновлении сразу, но я не получил Vue, чтобы распознать измененные данные (может быть, это правильный путь?)
Любая помощь очень ценится, это было постоянной проблемой в течение нескольких недель.
1 ответ
Можете ли вы показать свою другую часть содержимого таблицы?
Вы имеете в виду, что одна строка таблицы не обновляется, когда данные ответа сервера?
возможно, он может выстрелить в вашу проблему http://vuejs.org/v2/guide/list.html?