Несколько вызовов $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?

Другие вопросы по тегам