NuxtJS请求接口

最新推荐文章于 2024-08-09 17:18:32 发布

终身成长型

最新推荐文章于 2024-08-09 17:18:32 发布

阅读量1.8k

点赞数

分类专栏：前端开发文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_45675581/article/details/122994451

版权

本文详细介绍了NuxtJS中用于请求接口的`asyncData`和`fetch`方法。`asyncData`适用于pages目录下的.vue组件，不能在components中使用，且不支持`this`关键字。而`fetch`方法则可在页面组件和组件中使用，并允许使用`this`，通常用于组件数据的获取并存储到Vuex状态树中。

摘要由CSDN通过智能技术生成

前言：nuxt提供asyncData 和 fetch ，但是初学者会混乱，到底用哪个？怎么用？之类的问题。下面就详细说一下

一、asyncData

在官网也说了asyncData是页面组件使用的，也就是components目录下的.vue组件是不可以使用的（使用了不执行代码也不报错），所以总结一下。pages下面的.vue文件（也就是页面组件）使用asyncData来请求接口数据。

但是要注意一点，asyncData中不可以使用this。

我们可以这样用：

<template>
  <div>
  	<News />
  	<ul>
  		<li v-for='item in list' :key='item.id'>
  			{
  { item.imageName }}
  		</li>
  	</ul>
  </div>
</template>

<script>
export default {
  name: 'IndexPage',
  data () {
  	return {
  		list:[],
  		items:[]
  	}
  },
  async asyncData( {$axios} ){
  	let res = await $axios.get('http://testapi.xuexiluxian.cn/api/slider/getSliders');
  	let list = res.data.data.list;
  	return {