Nuxt使用axios请求后端数据

npm install axios -s

在plugins新建axios文件配置公共请求
…
vue页面导入

  import axiosApi from "../plugins/axios";

在asyncData进行请求渲染数据

  export default {
    
    
    data() {
    
    
      return {
    
    
        info: []
      }
    },

    async asyncData() {
    
    
      const res = await axiosApi("getData", {
    
    }, "post")
      return {
    
    
        info: res.data.top_four
      }
    },
  }

asyncData方法

asyncData 方法会在组件每次加载之前被调用
asyncData 可以在服务端或路由更新之前被调用
asyncData 返回的数据融合到组件的data方法
asyncData 方式是在组件初始化前被调用，方法内饰无法通过this来引用组件的实例对象

查看源代码可以查看请求到的数据