NUXT:异步数据
異步數(shù)據(jù)
Nuxt.js 擴(kuò)展了 Vue.js,增加了一個叫?asyncData?的方法,使得我們可以在設(shè)置組件的數(shù)據(jù)之前能異步獲取或處理數(shù)據(jù)。
使用Nuxt.js的異步數(shù)據(jù)
了解如何使用Nuxt.js管理異步數(shù)據(jù)。
由VueSchool制作視頻課程,用于支持Nuxt.js開發(fā)。
asyncData 方法
asyncData方法會在組件(限于頁面組件)每次加載之前被調(diào)用。它可以在服務(wù)端或路由更新之前被調(diào)用。 在這個方法被調(diào)用的時候,第一個參數(shù)被設(shè)定為當(dāng)前頁面的上下文對象,你可以利用?asyncData方法來獲取數(shù)據(jù),Nuxt.js 會將?asyncData?返回的數(shù)據(jù)融合組件?data?方法返回的數(shù)據(jù)一并返回給當(dāng)前組件。
注意:由于asyncData方法是在組件?初始化?前被調(diào)用的,所以在方法內(nèi)是沒有辦法通過?this?來引用組件的實(shí)例對象。
Nuxt.js 提供了幾種不同的方法來使用?asyncData?方法,你可以選擇自己熟悉的一種來用:
我們使用?axios?重構(gòu) HTTP 請求, 我們?強(qiáng)烈建議您?使用我們的?axios 模塊?用于您的Nuxt項(xiàng)目中。
如果您的項(xiàng)目中直接使用了node_modules中的axios,并且使用axios.interceptors添加攔截器對請求或響應(yīng)數(shù)據(jù)進(jìn)行了處理,確保使用?axios.create創(chuàng)建實(shí)例后再使用。否則多次刷新頁面請求服務(wù)器,服務(wù)端渲染會重復(fù)添加攔截器,導(dǎo)致數(shù)據(jù)處理錯誤。
import axios from 'axios' const myaxios = axios.create({// ... }) myaxios.interceptors.response.use(function (response) {return response.data }, function (error) {// ... })返回 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 }} }使用 回調(diào)函數(shù)
export default {asyncData ({ params }, callback) {axios.get(`https://my-api/posts/${params.id}`).then((res) => {callback(null, { title: res.data.title })})} }返回 對象
如果組件的數(shù)據(jù)不需要異步獲取或處理,可以直接返回指定的字面對象作為組件的數(shù)據(jù)。
export default {data () {return { foo: 'bar' }} }數(shù)據(jù)的展示
asyncData?方法返回的數(shù)據(jù)在融合?data?方法返回的數(shù)據(jù)后,一并返回給模板進(jìn)行展示,如:
<template><h1>{{ title }}</h1> </template>上下文對象
可通過?API?context?來了解該對象的所有屬性和方法。
使用?req/res(request/response) 對象
在服務(wù)器端調(diào)用asyncData時,您可以訪問用戶請求的req和res對象。
export default {async asyncData ({ req, res }) {// 請檢查您是否在服務(wù)器端// 使用 req 和 resif (process.server) {return { host: req.headers.host }}return {}} }訪問動態(tài)路由數(shù)據(jù)
您可以使用注入asyncData屬性的context對象來訪問動態(tài)路由數(shù)據(jù)。例如,可以使用配置它的文件或文件夾的名稱訪問動態(tài)路徑參數(shù)。所以,如果你定義一個名為_slug.vue的文件,您可以通過context.params.slug來訪問它。
export default {async asyncData ({ params }) {const slug = params.slug // When calling /abc the slug will be "abc"return { slug }} }監(jiān)聽 query 參數(shù)改變
默認(rèn)情況下,query的改變不會調(diào)用asyncData方法。如果要監(jiān)聽這個行為,例如,在構(gòu)建分頁組件時,您可以設(shè)置應(yīng)通過頁面組件的watchQuery屬性監(jiān)聽參數(shù)。了解更多有關(guān)API watchQuery的信息。
錯誤處理
Nuxt.js 在上下文對象context中提供了一個?error(params)?方法,你可以通過調(diào)用該方法來顯示錯誤信息頁面。params.statusCode?可用于指定服務(wù)端返回的請求狀態(tài)碼。
以返回?Promise?的方式舉個例子:
export default {asyncData ({ params, error }) {return axios.get(`https://my-api/posts/${params.id}`).then((res) => {return { title: res.data.title }}).catch((e) => {error({ statusCode: 404, message: 'Post not found' })})} }如果你使用?回調(diào)函數(shù)?的方式, 你可以將錯誤的信息對象直接傳給該回調(diào)函數(shù), Nuxt.js 內(nèi)部會自動調(diào)用?error?方法:
export default {asyncData ({ params }, callback) {axios.get(`https://my-api/posts/${params.id}`).then((res) => {callback(null, { title: res.data.title })}).catch((e) => {callback({ statusCode: 404, message: 'Post not found' })})} }如果你想定制 Nuxt.js 默認(rèn)的錯誤提示頁面,請參考?頁面布局。
總結(jié)
- 上一篇: 2020:编程语言大盘点
- 下一篇: NUXT: 视图和模板