異步數據

Nuxt.js 擴展了 Vue.js，增加了一個叫?asyncData?的方法，使得我們可以在設置組件的數據之前能異步獲取或處理數據。

使用Nuxt.js的異步數據

了解如何使用Nuxt.js管理異步數據。

由VueSchool制作視頻課程，用于支持Nuxt.js開發。

asyncData 方法

asyncData方法會在組件（限于頁面組件）每次加載之前被調用。它可以在服務端或路由更新之前被調用。 在這個方法被調用的時候，第一個參數被設定為當前頁面的上下文對象，你可以利用?asyncData方法來獲取數據，Nuxt.js 會將?asyncData?返回的數據融合組件?data?方法返回的數據一并返回給當前組件。

注意：由于asyncData方法是在組件?初始化?前被調用的，所以在方法內是沒有辦法通過?this?來引用組件的實例對象。

Nuxt.js 提供了幾種不同的方法來使用?asyncData?方法，你可以選擇自己熟悉的一種來用：

返回一個?Promise, nuxt.js會等待該Promise被解析之后才會設置組件的數據，從而渲染組件.

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

我們使用?axios?重構 HTTP 請求, 我們?強烈建議您?使用我們的?axios 模塊?用于您的Nuxt項目中。

如果您的項目中直接使用了node_modules中的axios，并且使用axios.interceptors添加攔截器對請求或響應數據進行了處理，確保使用?axios.create創建實例后再使用。否則多次刷新頁面請求服務器，服務端渲染會重復添加攔截器，導致數據處理錯誤。

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 }} }

使用 回調函數

export default {asyncData ({ params }, callback) {axios.get(`https://my-api/posts/${params.id}`).then((res) => {callback(null, { title: res.data.title })})} }

返回 對象

如果組件的數據不需要異步獲取或處理，可以直接返回指定的字面對象作為組件的數據。

export default {data () {return { foo: 'bar' }} }

數據的展示

asyncData?方法返回的數據在融合?data?方法返回的數據后，一并返回給模板進行展示，如：

<template><h1>{{ title }}</h1> </template>

上下文對象

可通過?API?context?來了解該對象的所有屬性和方法。

使用?req/res(request/response) 對象

在服務器端調用asyncData時，您可以訪問用戶請求的req和res對象。

export default {async asyncData ({ req, res }) {// 請檢查您是否在服務器端// 使用 req 和 resif (process.server) {return { host: req.headers.host }}return {}} }

訪問動態路由數據

您可以使用注入asyncData屬性的context對象來訪問動態路由數據。例如，可以使用配置它的文件或文件夾的名稱訪問動態路徑參數。所以，如果你定義一個名為_slug.vue的文件，您可以通過context.params.slug來訪問它。

export default {async asyncData ({ params }) {const slug = params.slug // When calling /abc the slug will be "abc"return { slug }} }

監聽 query 參數改變

默認情況下，query的改變不會調用asyncData方法。如果要監聽這個行為，例如，在構建分頁組件時，您可以設置應通過頁面組件的watchQuery屬性監聽參數。了解更多有關API watchQuery的信息。

錯誤處理

Nuxt.js 在上下文對象context中提供了一個?error(params)?方法，你可以通過調用該方法來顯示錯誤信息頁面。params.statusCode?可用于指定服務端返回的請求狀態碼。

以返回?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' })})} }

如果你使用?回調函數?的方式, 你可以將錯誤的信息對象直接傳給該回調函數， Nuxt.js 內部會自動調用?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 默認的錯誤提示頁面，請參考?頁面布局。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。