Skip to content

Commit 42d43dd

Browse files
committed
Update readme: add status property.
1 parent cd45369 commit 42d43dd

File tree

1 file changed

+67
-1
lines changed

1 file changed

+67
-1
lines changed

README.md

Lines changed: 67 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -263,6 +263,29 @@ new Vue({
263263
}
264264
```
265265
266+
You can trigger re-computation of an async computed property manually, e.g. to re-try if an error occured during evaluation. This should be avoided if you are able to achieve the same result using a watched property.
267+
268+
````js
269+
270+
new Vue({
271+
asyncComputed: {
272+
blogPosts: {
273+
get () {
274+
return Vue.http.get('/posts')
275+
.then(response => response.data)
276+
},
277+
}
278+
},
279+
methods: {
280+
refresh() {
281+
// Triggers an immediate update of blogPosts
282+
// Will work even if an update is in progress.
283+
this.$asyncComputed.blogPosts.update();
284+
}
285+
}
286+
}
287+
````
288+
266289
### Conditional Recalculation
267290
268291
Using `watch` it is possible to run the computed property again but it will run regardless of the
@@ -323,7 +346,50 @@ new Vue({
323346
}
324347
```
325348
326-
## Error handling
349+
## Computation status
350+
351+
For each async comptued property, an object is added to `$asyncComputed` that contains information about the current computation state of that object. This object contains the following properties:
352+
353+
```js
354+
{
355+
// Can be one of updating, success, error
356+
state: 'updating',
357+
// A boolean that is true while the property is updating.
358+
updating: true,
359+
// The property finished updating wihtout errors (the promise was resolved) and the current value is available.
360+
success: false,
361+
// The promise was rejected.
362+
error: false,
363+
// The raw error/exception with which the promise was rejected.
364+
exception: null
365+
}
366+
```
367+
368+
It is meant to be used in your rendering code to display update / error information.
369+
370+
````js
371+
new Vue({
372+
asyncComputed: {
373+
posts() {
374+
return Vue.http.get('/posts')
375+
.then(response => response.data)
376+
}
377+
}
378+
}
379+
}
380+
// This will display a loading message every time the posts are updated:
381+
// <div v-if="$asyncComputed.posts.updating"> (Re)loading posts </div>
382+
383+
// If you only want to display the message the first times the posts load, you can use the fact that the default value is null:
384+
// <div v-if="$asyncComputed.posts.updating && posts === null"> Loading posts </div>
385+
386+
// You can display an error message if loading the posts failed.
387+
// The vue-resources library passes the error response on to the rejection handler.
388+
// It is therefore available in $asyncComputed.posts.exception
389+
// <div v-else-if="$asyncComputed.posts.error"> Error while loading posts: $asyncComputed.posts.exception.statusText </div>
390+
````
391+
392+
## Global error handling
327393
328394
By default, in case of a rejected promise in an async computed property, vue-async-computed will take care of logging the error for you.
329395

0 commit comments

Comments
 (0)