Axios 從 GET 請求響應中設置 URL 為 GET 請求

Question

這個問題與這個問題非常相似

我已經使用 Laravel 設置了一個 Vue 頁面，並在 GET 請求的幫助下顯示所有帖子。 我還在收聽unshifting ECHO 事件並將值取消移動到所有帖子數組，使其顯示在頂部。

我已經使用此 package設置了無限滾動並為每頁分頁 5 個結果。 結果顯示在頁面上，並且從偵聽器推送到數組也可以。 但是，當無限滾動加載第 2 個結果頁面時，會重復第 6 個結果。

前面提到的 package 接受next_cursor一個偏移值作為參數，而不是page=2 ，因此它完全加載該值而沒有任何重復。

Controller.php

    public function pusherGet(Request $request) {
        $jobs = Job::orderBy('id','desc')->cursorPaginate();        
        return response()->json($jobs);
    }

Vue文件

    <template>
        <div>
            <h3 class="text-center">All Jobs</h3><br/>
            <div class="container">
                <div class="card" v-for="(job,index) in jobs" :key="index">
                    <div class="card-body">
                        <h4 class="card-title">{{ job.id }}</h4>
                        <p class="card-text">{{ job.request_type}}</p>
                    </div>
                </div>    
            </div>
            <infinite-loading  @infinite="getJob"></infinite-loading>
        </div>
    </template>
    <script>
        export default {
            data() {
                return {
                   page:1,
                   jobs: [],                
                }
            },       
            mounted() {           
                this.listenNewJobs();  
            },
            created() {
           
            },
            methods: {            
                listenNewJobs() {
                    Echo.channel('chat-room.1')
                        .listen('JobCreated', (e) => {
                            console.log(e);                        
                            this.jobs.unshift(e.job);                            
                        });
                    },
                    getJob($state) {
                        axios.get('getjobs', {                
                            params: {
                                page: this.page,                        
                            },
                       }).then(({data})=> {
                           console.log(data) 
                           if(data.data.length) {
                               this.page += 1;
                               this.jobs.push(...data.data)
                               $state.loaded();
                            } else {
                            $state.complete();
                        }
                    });                     
                }
            }        
        }
    </script>

結果 Json

    {
        data: Array(5), path: "getjobs?page=1", previous_cursor: "100", next_cursor: "96", per_page: 5, …}
        data: (5) [{…}, {…}, {…}, {…}, {…}]
        next_cursor: "96" // this is the parameter which i should attach to the GET request to paginate correct results
        next_page_url: "getjobs?page=1&next_cursor=96"
path: "getjobs?page=1"
        per_page: 5
        prev_page_url: "getjobs?page=1&previous_cursor=100"
previous_cursor: "100"
        __proto__: Object

任何幫助將不勝感激。

編輯：如何為 GET 請求設置 URL 以對分頁結果的 GET 請求響應的結果進行分頁以避免第二頁結果重復？

Answer 1

嘗試以下操作：

<script>
  export default {
    data() {
      return {
        jobs: [],
        isInitialLoaded: false,
        currentPage: 1,
        lastPage: 0,
      }
    },
    mounted() {
      this.listenNewJobs();
    },
    created() {
      //
    },
    methods: {
      listenNewJobs() {
        Echo.channel('chat-room.1')
          .listen('JobCreated', (e) => {
              console.log(e);
              this.jobs.unshift(e.job);
        });
      },
      async getJob($state){
        await this.fetchData().then((response) => {
          this.lastPage = response.data.last_page;
          if (response.data.data.length > 0) {
            response.data.data.forEach((item) => {
              const exists = this.jobs.find((job) => job.id == item.id);
              if (!exists) {
                // this.jobs.unshift(item); // Add to front of array
                this.jobs.push(item);
              }
            });
            if (this.currentPage - 1 === this.lastPage) {
              this.currentPage = 2;
              $state.complete();
            } else {
              this.currentPage += 1;
            }
            $state.loaded();
          } else {
            this.currentPage = 2;
            $state.complete();
          }
        });
        this.isInitialLoaded = true;
      },
      fetchData() {
        const url = this.isInitialLoaded ? `/getjobs?page=${this.currentPage}` : `/getjobs`;
        return axios.get(url);
      },
    }
  }
</script>