當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

NUXT:异步数据

發(fā)布時間：2025/3/21 编程问答 50 豆豆

生活随笔收集整理的這篇文章主要介紹了 NUXT:异步数据小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

異步數(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?方法，你可以選擇自己熟悉的一種來用：

返回一個?Promise, nuxt.js會等待該P(yáng)romise被解析之后才會設(shè)置組件的數(shù)據(jù)，從而渲染組件.

使用?async 或 await?(了解更多)

我們使用?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é)

以上是生活随笔為你收集整理的NUXT:异步数据的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

数据
nuxt