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

asyncData 方法

asyncData方法會(huì)在組件（限于頁(yè)面組件）每次加載之前被調(diào)用。它可以在服務(wù)端或路由更新之前被調(diào)用。 在這個(gè)方法被調(diào)用的時(shí)候，第一個(gè)參數(shù)被設(shè)定為當(dāng)前頁(yè)面的上下文對(duì)象，你可以利用 asyncData方法來(lái)獲取數(shù)據(jù)，Nuxt.js 會(huì)將 asyncData 返回的數(shù)據(jù)融合組件 data 方法返回的數(shù)據(jù)一并返回給當(dāng)前組件。

注意：由于asyncData方法是在組件 初始化 前被調(diào)用的，所以在方法內(nèi)是沒(méi)有辦法通過(guò) this 來(lái)引用組件的實(shí)例對(duì)象。

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

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

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

如果您的項(xiàng)目中直接使用了node_modules中的axios，并且使用axios.interceptors添加攔截器對(duì)請(qǐng)求或響應(yīng)數(shù)據(jù)進(jìn)行了處理，確保使用 axios.create創(chuàng)建實(shí)例后再使用。否則多次刷新頁(yè)面請(qǐng)求服務(wù)器，服務(wù)端渲染會(huì)重復(fù)添加攔截器，導(dǎo)致數(shù)據(jù)處理錯(cuò)誤。

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

返回 對(duì)象

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

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

數(shù)據(jù)的展示

asyncData 方法返回的數(shù)據(jù)在融合 data 方法返回的數(shù)據(jù)后，一并返回給模板進(jìn)行展示，如：

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

上下文對(duì)象

可通過(guò) API context 來(lái)了解該對(duì)象的所有屬性和方法。

使用 req/res(request/response) 對(duì)象

在服務(wù)器端調(diào)用asyncData時(shí)，您可以訪問(wèn)用戶(hù)請(qǐng)求的req和res對(duì)象。

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

    return {}
  }
}

訪問(wèn)動(dòng)態(tài)路由數(shù)據(jù)

您可以使用注入asyncData屬性的context對(duì)象來(lái)訪問(wèn)動(dòng)態(tài)路由數(shù)據(jù)。例如，可以使用配置它的文件或文件夾的名稱(chēng)訪問(wèn)動(dòng)態(tài)路徑參數(shù)。所以，如果你定義一個(gè)名為_(kāi)slug.vue的文件，您可以通過(guò)context.params.slug來(lái)訪問(wèn)它。

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

監(jiān)聽(tīng) query 參數(shù)改變

默認(rèn)情況下，query的改變不會(huì)調(diào)用asyncData方法。如果要監(jiān)聽(tīng)這個(gè)行為，例如，在構(gòu)建分頁(yè)組件時(shí)，您可以設(shè)置應(yīng)通過(guò)頁(yè)面組件的watchQuery屬性監(jiān)聽(tīng)參數(shù)。了解更多有關(guān)API watchQuery的信息。

錯(cuò)誤處理

Nuxt.js 在上下文對(duì)象context中提供了一個(gè) error(params) 方法，你可以通過(guò)調(diào)用該方法來(lái)顯示錯(cuò)誤信息頁(yè)面。params.statusCode 可用于指定服務(wù)端返回的請(qǐng)求狀態(tài)碼。

以返回 Promise 的方式舉個(gè)例子：

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ù) 的方式, 你可以將錯(cuò)誤的信息對(duì)象直接傳給該回調(diào)函數(shù)， Nuxt.js 內(nèi)部會(huì)自動(dòng)調(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)的錯(cuò)誤提示頁(yè)面，請(qǐng)參考 頁(yè)面布局。