Nuxt之asyncData获取数据

asyncData

在项目中需要在初始化页面前先得到数据,也就是我们常说的异步请求数据。Nuxt.js贴心的为我们扩展了Vue.js的方法,增加了asyncData(){……}。从名字上就很好理解,这是一个异步的方法。

创建远程数据

{  "name": "laowang",  "age": 18,  "interest": "I love coding"}

比如通过https://api.myjson.com/bins/mr6ma就能访问到上面的数据

使用asyncData获取数据

<template>
    <div>
        <h1>姓名:{{info.name}}</h1>
        <h2>年龄:{{info.age}}</h2>
        <h2>兴趣:{{info.interest}}</h2>
        <p><nuxt-link to='/'>Home</nuxt-link></p>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data() {
        return {
            name: 'muzidigbig',
        }
    },
    //方式一(await)
    // async asyncData(context) {
    //     console.log(await axios.get('https://api.myjson.com/bins/1dkbio')) 
    //     let {data} = await axios.get('https://api.myjson.com/bins/1dkbio') 
    //     return {info:data}
    //     error(params)//当请求错误时直接跳转到错误页面(放在返回值之后)
    // },
    //方式二
    asyncData ({ params }) {//请求
	return  axios({
	    method: 'get',
	    url: 'https://api.myjson.com/bins/1dkbio'
	})
	.then(function (response) {
            console.log(response.data)
            return { info: response.data};
            error(params)
        })
    },
}
</script>

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×