複数の$ http.get呼び出しで行が更新される必要があります

Question

私は複数のソース（ウェブサイト）からの情報を保持するテーブルを持っています。各行は異なるソースです。ユーザは、更新アイコンをクリックすることによって個々の行/ソース/ウェブサイトのデータを更新することができ、またはヘッダ行の更新アイコンをクリックしてすべての行を更新することができる。

リフレッシュすると、スクリプトは実際に各Webサイトにログインし、ライブデータを取得してからDBから失効したデータを取得します。

ユーザーがヘッダー行の[すべてを更新]アイコンをクリックしたときにデータが表示されるので、各行を更新したいと考えています。

私は物事を現在どのように構成しています。テーブルを更新しますが、1行ごとに完了したときにのみ更新されます。 laravel 5.3.31

（$ http.getを使用しています）

vuejs laravelスパーク...

Vue.component('websites', { 
 
// props: [''], 
 
    /** 
 
    * The components data 
 
    */ 
 
    data() { 
 
     \t return { 
 
     \t \t userLbProfiles: [], 
 
     \t \t spin_icon_many: false, 
 
     \t \t showRefreshButton: '', 
 
     \t \t refreshTime: '', 
 
     \t \t busy: '', 
 
     \t \t changeStatus: '', 
 
     \t }; 
 
    }, 
 

 

 
    /** 
 
    * Bootstrap the component 
 
    . */ 
 
    mounted() { 
 
     \t var self = this; 
 
     \t this.fetchLastRefreshTime(); 
 
     \t this.getData(); 
 
     \t this.busy = false; 
 
     \t this.showRefreshButton = true; 
 
    }, 
 

 

 

 
    /** 
 
    * Component's methods 
 
    */ 
 
    methods: { 
 

 
     /** 
 
     * get current stored data from the DB 
 
     * 
 
     * @return response 
 
     */ 
 
     getData() { 
 
     \t this.changeStatus = true; 
 
     \t this.$http.get('/get/all/userLbProfiles') 
 
     \t .then(function (response) { 
 
     \t \t console.log(response); 
 
     \t \t this.userLbProfiles = response.data; 
 
     \t \t this.busy = false; 
 
     \t \t this.spin_icon_many = false; 
 
     \t \t this.changeStatus = false; 
 
     \t }) 
 
     }, 
 

 
     /** 
 
     * get only ONE row from the DB 
 
     * 
 
     * @return response 
 
     */ 
 
     getDataForOne(userLbProfileId, i) { 
 
     \t this.changeStatus = true; 
 
     \t this.$http.get('/get/one/userLbProfile/'+userLbProfileId) 
 
     \t .then(function (response) { 
 
     \t \t console.log(response); 
 
     \t \t this.userLbProfiles[i] = response.data; 
 
      console.log(this.userLbProfiles[i]+'number: '+i); 
 
     \t \t this.busy = false; 
 
     \t \t this.userLbProfiles[i].spin_icon = false; 
 
     \t \t this.changeStatus = false; 
 
     \t }) 
 
     }, 
 

 

 

 

 
     /** 
 
     * Call the api to log into one website and fetch the live data 
 
     * 
 
     */ 
 
     refreshOne(userLbProfileId,i) { 
 
     \t this.userLbProfiles[i].spin_icon= true; 
 
     \t this.busy = true; 
 
     \t this.$http.get('/get/refresh/one'+userLbProfileId) 
 
     \t .then(function (response) { 
 
     \t \t console.log(response); 
 
     \t \t this.getDataForOne(userLbProfileId,i); 
 
     \t \t // this.getData(); 
 
     \t }) 
 
     }, 
 

 

 
     /** 
 
     * Call the api to log into and update the specified # of websites 
 
     * next in the list 
 
     * 
 
     */ 
 
     refreshMany() { 
 
     \t this.spin_icon_many = true;  \t 
 
     \t this.busy = true;  \t 
 
     \t for(i=0; i <= this.userLbProfiles.length-83; i++) {  \t \t 
 
     \t \t this.userLbProfiles[i].spin_icon= true; \t   \t 
 
     \t \t this.$http.get('/get/refresh/many'+this.userLbProfiles[i].id) 
 
     \t \t .then(function (response) { 
 
     \t \t \t console.log('got response after fetching refresh data for: '+this.userLbProfiles[i].id); 
 
     \t \t \t console.log(response);  \t \t \t   \t \t 
 
     \t \t }); 
 
     \t } 
 
     },

<get-website-data inline-template> 
 
\t <div class="panel panel-default"> 
 
\t \t <div class="panel-body"> 
 
\t   <div class="row"> 
 
\t   \t <div class="col-md-12"> 
 
\t \t \t   <form class="form-horizontal" role="form"> 
 
\t \t \t \t   <table class="table table-hover"> 
 
\t \t \t \t   \t <tr> 
 
\t \t \t \t   \t \t <th>Data Item 1</th> 
 
\t \t \t \t   \t \t <th>Data Item 2</th> 
 
\t \t \t \t   \t \t <th> 
 
\t \t \t   \t \t \t <form> 
 
    \t \t \t \t \t \t \t \t <a href="" 
 
    \t \t \t \t \t \t \t \t \t @click.prevent="refreshMany()"> 
 
    \t \t \t \t \t \t \t \t \t 
 
    \t \t \t \t \t \t \t \t \t <i v-if="spin_icon_many" 
 
    \t \t \t \t \t \t \t \t \t \t class="fa fa-fw fa-refresh fa-spin fa-2x"> 
 
    \t \t \t \t \t \t \t \t \t </i> 
 
    \t \t \t \t \t \t \t \t \t <i v-else 
 
    \t \t \t \t \t \t \t \t \t \t class="fa fa-fw fa-refresh fa-2x"> 
 
    \t \t \t \t \t \t \t \t \t </i> 
 
    \t \t \t \t \t \t \t \t </a> 
 
\t \t \t \t \t \t \t </form> --> 
 
\t \t \t \t \t \t \t <i class="fa fa-fw fa-refresh fa-2x"> \t \t \t \t \t \t \t 
 
\t \t \t \t   \t \t </th> 
 
\t \t \t \t   \t \t <th>Last Update</th> 
 
\t \t \t \t   \t </tr> 
 

 

 
\t \t \t \t \t \t \t <tr v-for="(userLbProfile, index) in userLbProfiles"> 
 
\t \t \t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t \t \t @{{ dataItem1 }} 
 
\t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t \t \t @{{ dataItem2 }} 
 
\t \t \t \t \t \t \t \t </td> 
 

 
        
 
              etc..

このコードで何が起こる

は、（当然です）forループは、応答が出る前に を実行します。各リクエストの範囲は3〜15秒です。

10個のウェブサイトがある場合、のは言わせ、10回のAJAX呼び出しは を出て行くが、私が見ることができる場合は、すべての他の10非同期でも 、完全を呼び出すまで（DBからのgetDataを呼び出して）最初.thenブロックが処理されません。それはコンソールに表示されます。

私はそう思うでしょう。それで、その応答のために個別に を処理しますが、どういうわけか彼らはお互いを知っていますか？ おそらくforループですか？

私もそれが行 を更新し、すぐに更新するにそれをだますかもしれない考えgetDataForOneを呼び出してみましたが、私は にVUEを取得できませんでしたが（多分これがとる権利ルートです？）変更されたデータを認識し

これまで何週間も、これは現在進行中の問題です。

Answer 1

テーブルの内容の他の部分を表示できますか？

サーバーの応答データが更新されると、1つのテーブル行が更新されません。

おそらく、あなたの問題を撃つことができますhttp://vuejs.org/v2/guide/list.html#Caveats？

他の問題は、あなたの関数が多くの時間を費やしすぎるリクエスト（レスポンス）であるため、サーバーから一度データを取得してすべてのテーブル行をリフレッシュできると思います。だから、サーバーをより簡単に高負荷にするので、私はそれをしません。