Nuxt项目中asyncData()方法中axios请求的使用_nuxt中asyncdata使用

第asyncData()方法
基本用法：

它会将asyncData返回的数据融合组件data方法返回数据一并给组件

调用时机：服务端渲染期间和客户端路由更新之前

注意事项：

asyncData()只能在页面组件上使用

没有this,因为它是在组件初始化之前被调用的

代码案例一：

<script>
import axios from "axios";
 
export default {
  data() {
    return {
      hotCities: [],
      provinceList: [],
    };
  },
  // 当你想要动态页面内容有利于SEO或者是提升首屏渲染速度的时候，就在asyncData中请求数据
  async asyncData() {
    const res = await axios({
      method: "POST",
      url: "http://192.168.0.100:8000/city/cityArea/changeCity",
    });
    console.log(res.data);
    return {
      hotCities: res.data.hotCities,
      provinceList: res.data.provinceList
    };
  },
};
</script>

代码案例二： 

<script>
import axios from "axios";
export default {
  data() {
    return {
      hotCities: [],
    };
  },
  asyncData() {
    return axios({
      method: "POST",
      url: "http://192.168.0.100:8000/city/cityArea/changeCity",
    }).then((res) => {
      console.log(res.data);
      return {
        hotCities: res.data.hotCities,
      };
    });
  }
};
</script>

以上2种写法均可。