axios 从 GET 请求响应中设置 GET 请求的 URL

Question

这个问题和This question很像

我已经使用 Laravel 建立了一个 Vue 页面，并在 GET 请求的帮助下显示所有帖子。我还在收听 Laravel ECHO 事件和unshifting all posts 数组的值，使其显示在顶部。

我已经使用this package 设置了无限滚动并为每页分页 5 个结果。结果出现在页面上，并且从侦听器推送到数组也可以。但是，当无限滚动加载第 2 个结果页面时，会重复第 6 个结果。

上述包接受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>