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

背景：

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

前端使用框架：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有服务端和客户端(created函数在服务端和客户端都执行了，所以导致这个问题)

解决：

三种方式

<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()
  }, 
  */
   /* 
  // 方式4、解决nuxt重复请求问题（当是客户端时，则执行程序）
  // 只加载一次，在组件（或页面）每次加载之前被调用，允许你在服务端渲染期间异步获取数据，并将这些数据与组件一起发送到客户端
  // asyncData(context){
  //   对象包含了一些关键属性，如
  //   params、error、query、req（仅在服务端可用）、res（仅在服务端可用）、redirect、store（如果使用了 Vuex）等
  // }
  // 使用Promise：如果你需要从异步API获取数据，你需要返回一个 Promise。Nuxt.js 会等待这个 Promise 解析，并将解析后的数据合并到组件的数据中
  asyncData({params,error}){
    //如果想调用多个方法，可以将多个方法写到一起去处理
    return homePage.getHotCourseTeacher()
                   .then(rs => {
                    return {
                      courseList : rs.data.data.courseList,
                      teacherList : rs.data.data.teacherList}
                   })
  }, 
  */
  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>

补充

在Nuxt.js 或者其他使用 Vue.js 的服务端渲染（SSR）框架中，process.server 、process.client是一个布尔值，用来判断当前代码是在服务器端运行还是在客户端运行。

这个全局变量

在服务端渲染时process.server会被设置为 true  process.server会被设置为 false

而在客户端渲染时process.server会被设置为 falseprocess.server会被设置为 true

你在代码中使用：

<script>
    if (process.server) {
        return xxx;
    }
    --其它逻辑
</script>

这意味着如果代码是在服务器端执行，函数会立即返回，后续的代码不会被执行。这通常用于阻止某些只应在客户端运行的代码在服务器端执行，比如跟窗口（window）、文档（document）或者用户界面事件有关的代码。

服务端渲染的框架必须区分服务器和客户端代码，因为有些JavaScript API只在浏览器中可用，而不是在Node.js环境中可用。

使用 process.server 这样的检查可以确保你的应用程序不会在服务端渲染过程中尝试调用这些只在客户端可用的API，从而避免错误和异常。