Nuxt之asyncData方法獲取數據

在項目中須要在初始化頁面前先獲得數據，也就是咱們常說的異步請求數據。Nuxt.js貼心的爲咱們擴展了Vue.js的方法，增長了anyncData方法。從名字上就很好理解，這是一個異步的方法。

一. 建立遠程數據

在這裏製做一些假的遠程數據，我選擇的網站是myjson.com，它是一個json的簡單倉庫，學習使用是很是適合的。 咱們打開網站，在對話空中輸入JSON代碼，這個代碼能夠本身隨意輸入哦。

{
  "name": "laowang",
  "age": 18,
  "interest": "I love coding"
}
複製代碼

輸入後，網站會給你一個地址，這就是你這個JSON倉庫的地址了。

https://api.myjson.com/bins/mr6ma

二. 安裝Axios

npm i axios --save複製代碼

三. ansycData的promise方法

在pages下新建文件asyncData.vue

<template>
  <div>
    <h1>姓名：{{info.name}}</h1>
    <h1>年齡：{{info.age}}</h1>
    <h1>興趣：{{info.interest}}</h1>
    {{name}}
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      name: 'Hello World'
    }
  },
  asyncData() {
    return axios.get('https://api.myjson.com/bins/mr6ma')
                .then((res) => {
                   return {info: res.data}
                })
  }
}
</script>
複製代碼

這時候咱們能夠看到，瀏覽器中已經能輸出結果了。

四. ansycData的await方法

固然上面的方法稍顯過期，如今都在用ansyc…await來解決異步,改寫上面的代碼。

<template>
  <div>
    <h1>姓名：{{info.name}}</h1>
    <h1>年齡：{{info.age}}</h1>
    <h1>興趣：{{info.interest}}</h1>
    {{name}}
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      name: 'Hello World'
    }
  },
  async asyncData() {
    let { data } = await axios.get('https://api.myjson.com/bins/mr6ma')
    return { info: data }
  }
}
</script>複製代碼

本文引用於技術胖nuxt教程，感謝胖哥