Update async-data example

This commit is contained in:
Sébastien Chopin 2016-12-27 16:57:50 +01:00
parent 45f22a418a
commit 05a66e0cba
5 changed files with 130 additions and 42 deletions

View File

@ -6,10 +6,11 @@
`data` is called every time before loading the component (*only if attached to a route*). It can be called from the server-side or before navigating to the corresponding route.
The `data` method receives the context as the first argument, you can use it to fetch some data and return the component data. To make the data method asynchronous, Nuxt.js offers you 2 ways, choose the one you're the most familiar with:
The `data` method receives the context as the first argument, you can use it to fetch some data and return the component data. To make the data method asynchronous, Nuxt.js offers you different ways, choose the one you're the most familiar with:
1. returning a `Promise`, Nuxt.js will wait for the promise to be resolved before rendering the Component
2. Define a second argument which is a callback method to be called like this: `callback(err, data)`
2. Using the async/await ES7 feature
3. Define a second argument which is a callback method to be called like this: `callback(err, data)`
Example with returning a `Promise`:
```js
@ -23,6 +24,16 @@ export default {
}
```
Example with using `async/await`:
```js
export default {
async data ({ params }) {
let { data } = axios.get(`https://my-api/posts/${params.id}`)
return { title: data.title }
}
}
```
Example with using the `callback` argument:
```js
export default {

View File

@ -1,8 +1,9 @@
<template>
<div>
<div class="container">
<h1>User Agent</h1>
<p>{{ userAgent }}</p>
<p><nuxt-link to="/post">See a post (http request / Ajax)</nuxt-link></p>
<p><nuxt-link to="/posts">Blog</nuxt-link></p>
</div>
</template>
@ -20,10 +21,16 @@ export default {
</script>
<style scoped>
.container {
width: 70%;
margin: auto;
text-align: center;
padding-top: 100px;
}
p {
font-size: 20px;
text-align: center;
padding: 100px;
padding-bottom: 0;
}
a {
color: #41B883;
}
</style>

View File

@ -1,35 +0,0 @@
<template>
<div>
<p>{{ post.title }}!</p>
<p><nuxt-link to="/">Back home</nuxt-link></p>
</div>
</template>
<script>
import axios from 'axios'
export default {
data ({ req }) {
// We can return a Promise instead of calling the callback
return axios.get('https://jsonplaceholder.typicode.com/posts/1')
.then((res) => {
return { post: res.data }
})
},
head () {
return {
title: this.post.title
}
}
}
</script>
<style scoped>
p {
font-size: 20px;
text-align: center;
padding: 100px;
padding-bottom: 0;
}
</style>

View File

@ -0,0 +1,52 @@
<template>
<div class="container">
<h1>{{ post.title }}</h1>
<pre>{{ post.body }}</pre>
<p><nuxt-link to="/posts">Back to the list</nuxt-link></p>
</div>
</template>
<script>
import axios from 'axios'
export default {
async data ({ params }) {
// We can use async/await ES6 feature
let { data } = await axios.get(`https://jsonplaceholder.typicode.com/posts/${params.id}`)
return { post: data }
},
head () {
return {
title: this.post.title
}
}
}
</script>
<style scoped>
.container {
width: 70%;
margin: auto;
text-align: center;
padding-top: 100px;
}
ul {
list-style-type: none;
padding: 0;
}
ul li {
border: 1px #ddd solid;
padding: 20px;
text-align: left;
}
ul li a {
color: gray;
}
p {
font-size: 20px;
}
a {
color: #41B883;
}
</style>

View File

@ -0,0 +1,53 @@
<template>
<div class="container">
<h1>Blog</h1>
<ul>
<li v-for="post in posts">
<nuxt-link :to="{ name: 'posts-id', params: { id: post.id } }">{{ post.title }}</nuxt-link>
</li>
</ul>
<p><nuxt-link to="/">Back to home page</nuxt-link></p>
</div>
</template>
<script>
import axios from 'axios'
export default {
data ({ req, params }) {
// We can return a Promise instead of calling the callback
return axios.get('https://jsonplaceholder.typicode.com/posts')
.then((res) => {
return { posts: res.data.slice(0, 5) }
})
}
}
</script>
<style scoped>
.container {
width: 70%;
margin: auto;
text-align: center;
padding-top: 100px;
}
ul {
list-style-type: none;
padding: 0;
}
ul li {
border: 1px #ddd solid;
padding: 20px;
text-align: left;
}
ul li a {
color: gray;
}
p {
font-size: 20px;
}
a {
color: #41B883;
}
</style>