Nuxt.js 異步數(shù)據(jù)

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

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 來引用組件的實例對象。

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

1. 返回一個 Promise, nuxt.js會等待該P(yáng)romise被解析之后才會設(shè)置組件的數(shù)據(jù)，從而渲染組件.
2. 使用 async 或 await (了解更多)

我們使用 axios 重構(gòu) HTTP 請求, 我們 強(qiáng)烈建議您 使用我們的 axios 模塊 用于您的Nuxt項目中。

如果您的項目中直接使用了node_modules中的axios，并且使用axios.interceptors添加攔截器對請求或響應(yīng)數(shù)據(jù)進(jìn)行了處理，確保使用 axios.create創(chuàng)建實例后再使用。否則多次刷新頁面請求服務(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 和 res
    if (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)的錯誤提示頁面，請參考 頁面布局。