manbetxapp

理解在next 2.12中fetch如何工作

2020年4月6日9分钟阅读
图片由拉胡尔Bhosale

Nuxt介绍了一种新的取来最新版本2.12。Fetch提供了一种将数据带入next应用程序的全新方式。

在这篇文章中,我们将探讨fetch钩子的不同特性,并尝试理解它是如何工作的。

获取Hook和Nuxt生命周期

就next生命周期钩子而言,取来位于Vue生命周期之后创建钩。正如我们已经知道的,所有的Vue生命周期钩子都是用它们来调用的上下文。这同样适用于取来钩。

next生命周期中的新获取"src=

在服务器端创建组件实例后调用Fetch hook。这使中可用的上下文取来

出口默认的取来慰问日志

让我们看看这对页面组件意味着什么。

页面组件

在帮助下背景信息,获取能够直接突变组件的数据。这意味着我们可以设置组件的本地数据,而无需调度Vuex Store操作或从页面组件的突变。

因此,Vuex成为可选的,但并非不可能。我们还可以用这是一家廉价商店如有需要,照常访问Vuex商店。

取钩可用性

取来,我们可以异步预取数据在任何Vue组件中. 这意味着,除了/页目录,其他.vue组件中发现/布局/组件目录也可以从fetch钩子中获益。

让我们看看这对于布局和构建块组件意味着什么。

布局组件

使用新的取来,现在我们可以直接从布局组件进行API调用。这在v2.12发布之前是不可能的。

可能的用例

  • 从Nuxt布局中的后端获取配置数据以动态生成页脚和导航栏
  • 在导航栏中获取与用户相关的数据(即用户配置文件、购物车项目计数)
  • 获取站点相关数据布局/错误.vue

积木(孩子/嵌套)组件

取来钩子组件也可用,我们可以从页面级组件卸载一些数据获取任务,并将它们委托给嵌套组件。在v2.12发布之前,这也是不可能的。

这在很大程度上减少了路由级组件的责任。

可能的用例-我们仍然可以将道具传递给子组件,但是如果子组件需要有自己的数据获取逻辑,现在就可以了!

多取钩子的调用顺序

由于每个组件都可以有自己的数据获取逻辑,您可能会问,它们调用的顺序是怎样的?

获取钩在服务器端调用一次(在对Nuxt应用程序的第一个请求上),然后在导航到其他路由时在客户端调用。但由于我们可以为每个组件定义一个fetch钩子,所以fetch钩子是按其层次结构的顺序调用的。

在服务器端禁用读取

此外,如果需要,我们甚至可以在服务器端禁用fetch。

出口默认的获取服务器

这样,fetch钩子只会在客户端被调用。当获取服务器设置为false,$fetchState.pending正在等待变成是的组件在服务器端呈现时。

错误处理

新建取来在组件级别处理错误。让我们看看如何。

因为我们是异步获取数据的,所以新的fetch()提供了一个fetchState美元对象来检查请求是否已完成并成功地进行。

下面是fetchState美元对象看起来像。

$fetchState = {pending: true | false, error: null | {}, timestamp: Integer};

我们有三把钥匙,

  1. 待定-让您在客户端调用fetch时显示占位符
  2. 错误- - - - - -让您显示错误消息
  3. 时间戳,显示对缓存有用的最后一次读取的时间戳维生

然后,这些键直接在组件的模板区域中使用,以便在从API获取数据的过程中显示相关占位符。

<模板><div><pv-中频$fetchState.pending正在等待>抓取文章……p><pv-else-iffetchState.error美元>获取帖子时出错p><ulv-else>...ul>div>模板>

当错误发生在,我们可以通过检查process.server取钩子,然后用把新的错误()声明。

异步取来常量帖子等待取来https://jsonplaceholder.typicode.com/posts/$ {$路线参数身份证件然后res=>resjson如果帖子身份证件===$路线参数身份证件帖子帖子其他的//在服务器和服务器上设置状态代码如果过程服务器$numxt个上下文resstatusCode404//使用throw new Error()新的错误后没有找到的

以这种方式设置HTTP状态码对正确的搜索引擎优化有用吗

作为方法获取

新的fetch钩子还充当一个方法,可以在用户交互时调用,也可以从组件方法以编程方式调用。

<按钮@单击取美元>刷新数据按钮>
//从脚本部分的组件方法出口默认的方法刷新取美元

提高next页面的性能万博体育max手机注册

我们可以使用:keep alive道具道具和活性钩子使用新的获取钩子使Nuxt页组件更具性能。万博体育max手机注册

努克斯允许缓存一定数量的页面在内存中以及它们获取的数据。同时也允许添加秒数在我们重新获取数据之前。

对于以上任何一种方法,我们都必须使用维生在通用的道具< nuxt / ><下一个孩子>组件。

布局/ default.vue
<模板><div><努克斯维生/>div>模板>

另外,我们可以通过:keep alive道具< nuxt / >组件来缓存许多页及其获取的数据。

:keep alive道具当我们在网站的其他地方导航时,Prop允许我们指明应该在内存中保存的页面的最大数量。

布局/ default.vue
<努克斯维生:keep alive道具{max: 10}/>

上面是一种提高页面性能的方法,它更高级、更通用,而下一种方法通过使用时间戳财产fetchState美元并将其与重新获取数据之前的延迟秒数进行比较。

Vue的活性hook在这里与next 's一起使用维生支持重新获取数据。

出口默认的活性//如果最后一次提取时间超过一分钟,请再次调用提取如果fetchState美元时间戳<=日期现在-60000取美元

异步数据与获取

就页面组件而言,新的取来看起来太像了asyncData ()因为它们都处理本地数据。但以下是一些值得注意的关键差异。

从Nuxt 2.12开始,asyncData方法仍然是一个活动特性。让我们看看两者之间的一些关键区别asyncData而且是新的取来

asyncData

  1. asyncData仅限于页面级组件
  2. 上下文是不可用的
  3. 添加有效负载返回的数据
出口默认的异步asyncData上下文常量数据等待上下文axios美元让美元https://jsonplaceholder.typicode.com/todos//“todos”不必在data()中声明返回待办事项数据项目// todos与本地数据合并

新建获取

  1. 取来在所有的Vue组件中都有
  2. 上下文是可用的
  3. 简单的变异本地数据
出口默认的数据返回待办事项异步取来常量数据等待得到https://jsonplaceholder.typicode.com/todos//`托多斯必须在data()中声明待办事项数据

在next 2.12之前获取

如果您使用next有一段时间了,那么您就会知道取来有显著性差异。

这是一个突破性的改变吗?

不,它不是。实际上,旧的fetch仍然可以通过传递上下文作为第一个参数,以避免对现有的next应用程序进行任何破坏性更改。

下面列出了取来钩与之前版本2.12。

1.调用的顺序取来

之前,取来在启动组件之前调用了hook,因此在抓取钩子中不可用。

之后-取来在访问路由时在服务器端创建组件实例后调用。

2.vs上下文

之前,我们可以使用nunext上下文对于页面级组件,假定上下文作为第一个参数传递。

出口默认的取来上下文// …

之后-我们可以进入上下文就像Vue客户端钩子一样,不传递任何参数。

出口默认的取来慰问日志

3.可用性取来

之前,只有页面(路由级)组件允许在服务器端获取数据。

之后-现在,我们可以在任何Vue组件中异步预取数据。

4.调用的顺序取来

之前,取来可以被称为服务器端一次(在对Nuxt应用程序的第一次请求时),当导航到进一步的路由时被称为客户端。

之后-新建取来和以前一样,但是…

...既然我们能有一个取来对于每一个组件,取来钩子按其层次结构的顺序被调用。

5.错误处理

之前,我们使用了context.error函数,该函数在API调用期间发生错误时显示自定义错误页面。

之后-新建取来使用fetchState美元对象来处理API调用期间模板区域中的错误。

错误处理在组件级执行。

这是否意味着我们不能像在next 2.12之前那样向用户显示自定义错误页面?

是的,我们可以,但只能用asyncData ()当它是关于页面级组件数据时。当使用取来,我们可以利用这是.$numxt.error({statusCode:404,message:'Data not found'})显示自定义错误页。

结论

新的获取钩子带来了很多改进,并在获取数据和以全新的方式组织路由级和构建块组件方面提供了更多的灵活性!

当您计划和设计需要在同一路由中调用多个API的新Nuxt项目时,这肯定会让您的想法有所不同。

我希望这篇文章已经帮助你熟悉新的取来特性。我很想看看你用它做了什么。

接下来是什么

努克斯 获取 异步数据获取 API.