使用Nuxt框架刷新页面向后端接口请求两次的问题

Mrzxs / 2024-01-20 / 原文

背景：

当我刷新页面时，发现后端接口被请求了两次

前端使用框架：nuxt、vue、axios等

后端使用框架：springboot、maven、redis、mybatisplus等

主页面程序代码

<script>
import homePage from '@/api/homePage'
export default {
  data () {
    return {
      bannerList:[],//轮播数据
      courseList:[],//课程数据
      teacherList:[]//讲师数据
    }
  },
  created(){
    this.getBanner()
    this.getHotCourseTeacher()
  },
  methods:{
    //获取首页轮播数据
    getBanner(){
      homePage.getBanner()
            .then(rs => {
              this.bannerList = rs.data.data.list
            })
    },
    //获取热门课程讲师
    getHotCourseTeacher(){
      homePage.getHotCourseTeacher()
              .then(rs => {
                this.courseList = rs.data.data.courseList
                this.teacherList = rs.data.data.teacherList
              })
    }
  }
}
</script>

分析：

观察前端程序代码，未发现问题，通过network发现仅请求了一次后端，且由于是第一次使用nuxt框架，所以并没有怀疑是nuxt的问题

所以我怀疑是因为后端的问题：

1、后端程序代码有多次调用？（重新细看了一遍发现并没有）

2、mybatisplus的问题？（我去搜了一下，发现确实有这一类的问题，但是都是什么在test中发生的，处理了半天也没有解决）

3、然后我在接口处 System.out.println("xx"); 刷新页面发现输出了两次xx。那么可以断定是前端请求了两次后端

4、然后我搜索nuxt框架刷新页面发生了两次请求

1）swipper导致的

2）链接地址不存在

3）各种钩子问题

4）nuxt有服务端和客户端(create函数在服务端和客户端都执行了，所以导致这个问题)

解决：

三种方式

<script>
import homePage from '@/api/homePage'
export default {
  data () {
    return {
      bannerList:[],
      courseList:[],
      teacherList:[]
    }
  },
  created(){
    /* 
    //方式1、解决nuxt重复请求问题（如果是服务端执行时则退出，之后的程序不执行，那么就可以保证剩余的程序在客户端执行）
    if (process.server) return 
    this.getBanner()
    this.getHotCourseTeacher()
    */
  
    //方式2、解决nuxt重复请求问题（当是客户端时，则执行程序）
    if(process.client){
      this.getBanner()
      this.getHotCourseTeacher()
    }
  },
  /* 
  //方式3、解决nuxt重复请求问题（在客户端挂载完成后请求数据，这样就不会在服务端请求）
  mounted(){
    this.getBanner()
    this.getHotCourseTeacher()
  }, 
  */
  methods:{
    //获取首页轮播数据
    getBanner(){
      homePage.getBanner()
            .then(rs => {
              this.bannerList = rs.data.data.list
            })
    },
    //获取热门课程讲师
    getHotCourseTeacher(){
      homePage.getHotCourseTeacher()
              .then(rs => {
                this.courseList = rs.data.data.courseList
                this.teacherList = rs.data.data.teacherList
              })
    }
  }
}
</script>