asyncData

简介

asyncData 可以用来在客户端加载 Data 数据之前对其做一些处理,也可以在此发起异步请求,提前设置数据,这样在客户端加载页面的时候,就会直接加载提前渲染好并带有数据的 DOM,完成服务端渲染,有助于搜索引擎的抓取。

注意事项:

  1. 由于在客户端创建实例化之前加载,所以不能使用 this,钩子提供一个参数,可以获取上下文对象({isDev, route, store, env, params, query, req, res, redirect, error}等),从而做一些简单操作。
  2. 只能在路由页面组件中使用(每次加载页面都会调用),在自定义组件中无效。
  3. 返回的数据最终将与 data 数据合并,为了保证不发生页面渲染错误,返回的键应事先在 data 里声明好(如果 template 中没有使用所需属性,则并不必声明)。
  4. 钩子在路由转换期间解析,所以在 return 之前会一直等待内部逻辑处理,阻止页面加载。如果要抛出异常,可以使用参数提供的 error 方法。

使用 (Javascript 方式)

按照官网说明 asyncData 有三种使用方式,

使用示例:

  • 返回 Promise 对象的方式

export default {
asyncData({ params }) {
return axios.get(`https://my-api/posts/${params.id}`).then(res => {
return { title: res.data.title };
});
}
};
  • 使用 async/await 的方式

export default {
async asyncData({ params }) {
const { data } = await axios.get(`https://my-api/posts/${params.id}`);
return { title: data.title };
}
};
  • 使用回调函数的方式(v2.12 弃用)

export default {
asyncData({ params }, callback) {
// asyncData提供两个参数(已弃用)
axios.get(`https://my-api/posts/${params.id}`).then(res => {
callback(null, { title: res.data.title });
});
}
};

使用(Typescript 方式)

Nuxt 的 ts 版组件,有三种构建风格,

使用示例:

  • 选项式 API

export default Vue.extend({
// async/await方式
async asyncData({ params }) {
const { data } = await axios.get(`https://my-api/posts/${params.id}`);
return { title: data.title };
} // Promise方式
/* asyncData({ params }) {
return axios.get(`https://my-api/posts/${params.id}`).then(res => {
return { title: res.data.title }
})
}, */
});
  • 类式组件

    类式组件应在装饰器内传入该方法,而不是在 Class 内使用。

import { Component, Vue } from "vue-property-decorator";

@Component({
async asyncData({ params }) {
const { data } = await axios.get(`https://my-api/posts/${params.id}`);
return { title: data.title };
}
})
export default class PageIndex extends Vue {
title: string;
}
  • 组合式 API(v3.0 以上)

import { defineComponent, ref } from "@vue/composition-api";
import { useAsyncData } from "#app"; export default defineComponent({
async setup() {
const { data } = await useAsyncData("count", () => $fetch("/api/count"));
return {
title: data.title
};
}
});

fetch

旧版本的 fetch 在组件实例化之前运行,无法使用 this,如同 asyncData,提供了可查询长下文的参数,且亦只能在页面级组件中使用,并且只能通过上下文参数操作 store 状态的数据,而不能设置或合并 data 数据。

注:由于 fetch 钩子的功能在 nuxt v2.12 以上版本作了较大调整,所以下文只记录新的使用方式。

fetch 用来在组件加载时预先提取数据,运行于组件实例创建之后(created)页面渲染完成之前(mounted),并且可以用于任何组件(包括路由页面或自定义组件)和随时通过$fetch 方法主动更新数据。

默认选项式组件:

export default {
fetchOnServer: false, //可以通过内置的fetchOnServer属性,来关闭服务端fetch行为。
async fetch() {
const { data } = await axios.get(
`https://my-api/posts/${this.$route.params.id}`
);
this.title = data.title;
}
};

Typescript 类式组件:

import { Component, Vue } from "vue-property-decorator";

@Component
export default class PageBarIndex extends Vue {
async fetch(this: PageBarIndex) {
const { data } = await axios.get(
`https://my-api/posts/${this.$route.params.id}`
);
this.title = data.title;
}
}

asyncData 和 fetch 的区别

  • 组件限制

    • asyncData 仅限于页面级组件。
    • fetch 可用于任意组件。
  • 获取上下文
    • asyncData 不可以使用 this,只能通过回调参数获取上下文对象。
    • fetch 可以使用 this。
  • 数据操作
    • asyncData 通过 return 合并 data 数据。
    • fetch 可以使用 this 直接修改赋值。
  • 调用时机
    • asyncData 只在页面创建前调用。
    • fetch 在页面实例创建后调用,并可以通过$fetch 方法随时触发,$fetchState.timestam 属性可以获取最后一次触发的时间戳。
  • 错误处理
    • asyncData 通过 error 参数抛出错误,但并不会在页面显示异常。
    • fetch 可以使用 throw new Error()来抛出异常,在页面调用$fetchState.error 方法获取异常状态。
  • 页面渲染
    • asyncData 在页面创建前填充数据。
    • fetch 可通过 fetchOnServer 属性设置是否允许在服务端获取数据,设置为 false 将可以在渲染数据时通过$fetchState.pendinding 获取加载状态。

生命周期示意图

NuxtJS的AsyncData和Fetch使用详解的更多相关文章

  1. 前后端数据交互(四)——fetch 请求详解

    fetch 是 XMLHttpRequest 的升级版,使用js脚本发出网络请求,但是与 XMLHttpRequest 不同的是,fetch 方式使用 Promise,相比 XMLHttpReques ...

  2. git clone,push,pull,fetch命令详解

    源自 Git是目前最流行的版本管理系统,学会Git几乎成了开发者的必备技能. Git有很多优势,其中之一就是远程操作非常简便.本文详细介绍5个Git命令,它们的概念和用法,理解了这些内容,你就会完全掌 ...

  3. git fetch & pull详解

    1.简单概括 先用一张图来理一下git fetch和git pull的概念: 可以简单的概括为: git fetch是将远程主机的最新内容拉到本地,用户在检查了以后决定是否合并到工作本机分支中. 而g ...

  4. Docker命令详解

    Docker命令详解   最近学习Docker,将docker所有命令实验了一番,特整理如下: # docker --help Usage: docker [OPTIONS] COMMAND [arg ...

  5. Python中操作mysql的pymysql模块详解

    Python中操作mysql的pymysql模块详解 前言 pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同.但目前pymysql支持python3.x而后者不支持 ...

  6. SQL注入攻防入门详解

    =============安全性篇目录============== 本文转载 毕业开始从事winfrm到今年转到 web ,在码农届已经足足混了快接近3年了,但是对安全方面的知识依旧薄弱,事实上是没机 ...

  7. SQL注入攻防入门详解(2)

    SQL注入攻防入门详解 =============安全性篇目录============== 毕业开始从事winfrm到今年转到 web ,在码农届已经足足混了快接近3年了,但是对安全方面的知识依旧薄弱 ...

  8. PHP PDO函数库详解

    PDO是一个“数据库访问抽象层”,作用是统一各种数据库的访问接口,与mysql和mysqli的函数库相比,PDO让跨数据库的使用更具有亲和力:与ADODB和MDB2相比,PDO更高效.目前而言,实现“ ...

  9. Oracle的exp/imp详解

    原文地址:Oracle的exp/imp详解 作者:jxlazzw 备份概述 逻辑备份:备份可分为两类 ,物理备份和逻辑备份 物理备份:该方法实现数据库的完整恢复,但需要极大的外部存储设备,例如磁带库, ...

随机推荐

  1. hdu 4771 Stealing Harry Potter's Precious (BFS+状压)

    题意: n*m的迷宫,有一些格能走("."),有一些格不能走("#").起始点为"@". 有K个物体.(K<=4),每个物体都是放在& ...

  2. 『学了就忘』Linux基础 — 17、远程服务器关机及重启时的注意事项

    目录 1.为什么远程服务器不能关机 2.远程服务器重启时需要注意两点 3.不要在服务器访问高峰运行高负载命令 4.远程配置防火墙时不要把自己踢出服务器 5.指定合理的密码规范并定期更新 6.合理分配权 ...

  3. centos安装pm2报错

    报错信息: /usr/lib/node_modules/pm2/node_modules/chalk/source/index.js:103 ...styles, 这个问题其实很简单,就是npm和no ...

  4. java核心技术 第3章 java基本程序设计结构

    类名规范:以大写字母开头的名词 若由多个单词组成 每个单词的第一个字母应大写(驼峰命名法)  与.java文件名相同 运行程序:java ClassName(dos命令) 打印语句:System.ou ...

  5. spark搭建

    1.上传解压,配置环境变量 配置bin目录 2.修改配置文件 conf cp spark-env.sh.template spark-env.sh 增加配置 export SPARK_MASTER_I ...

  6. [啃书] 第1篇 - 输入输出/变量类型/math函数

    啃书部分已单独做成Gitbook了,后续不再更新.详情访问个人网站ccoding.cn或ccbyte.github.io 说在前面 一直想刷算法找不到很适合的书,后来发现考PAT很多推荐<算法笔 ...

  7. Django笔记&教程 0-2 框架版本与相关工具

    Django 自学笔记兼学习教程第0章第2节-- 框架版本与相关工具 点击查看教程总目录 1 版本 python: 3.6.5 Django: 2.2.11 (有些地方我也会对比下各种版本的区别) 安 ...

  8. Python多版本共存的方法

    目录 Python2.Python3共存的方法 python2下载及环境变量配置 第一步.打开Python官网,下载Python2 第二步.python2环境变量配置 测试结果 Python2.Pyt ...

  9. requests的get请求基本使用

    官方文档 https://docs.python-requests.org/zh_CN/latest/   快速上手 https://docs.python-requests.org/zh_CN/la ...

  10. myeclipse trial expired暂时解决办法

    运行以下程序,生成key: import java.io.*; public class MyEclipseGen { private static final String LL = "D ...