Skip to content

Commit bdb3707

Browse files
committed
docs: [zh-cn] Promise sugar
1 parent 70e0043 commit bdb3707

File tree

1 file changed

+31
-0
lines changed

1 file changed

+31
-0
lines changed

docs/zh-cn/pipeline/data.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
- `resolve(data)` -> `transition.next(data)`
1515
- `reject(reason)` -> `transition.abort(reason)`
1616

17+
- 或者,返回一个包含 Promise 的对象。见后文 [Promise 语法糖](#promise-%E8%AF%AD%E6%B3%95%E7%B3%96)
18+
1719
### 详情
1820

1921
`data` 切换勾子会在 `activate` 被断定(resolved)以及界面切换之前被调用。切换进来的组件会得到一个名为 **`$loadingRouteData`** 的元属性,其初始值为 `false` ,在 `data` 勾子函数被断定后会被赋值为 `true` 。这个属性可用来会切换进来的组件展示加载效果。
@@ -107,3 +109,32 @@ route: {
107109
</div>
108110
</div>
109111
```
112+
113+
### Promise 语法糖
114+
115+
上面的并发请求示例需要我们自己调用 `Promise.all` 来将多个 Promise 合并成一个,并且最终处理返回的数据时也有些繁琐。`vue-router` 在这里提供了一个语法糖,让我们可以在 `data` 函数中直接返回一个包含 Promise 的对象(当然也可以包含非 Promise 的值)。利用这个语法糖和 ES6,我们可以这样实现上面的例子:
116+
117+
``` js
118+
route: {
119+
data: ({ to: { params: { userId }}}) => ({
120+
user: userService.get(userId),
121+
post: postsService.getForUser(userId)
122+
})
123+
}
124+
```
125+
126+
路由器将会在这两个 Promise resolve 之后的值分别赋值给组件的 `user``post` 属性。同时,`$loadingRouteData` 会在所有的 Promise 都 resolve 之后被设置为 `false`
127+
128+
上面的例子在 ES5 下可以这样写:
129+
130+
``` js
131+
route: {
132+
data: function (transition) {
133+
var userId = transition.to.params.userId
134+
return {
135+
user: userService.get(userId),
136+
post: postsService.getForUser(userId)
137+
}
138+
}
139+
}
140+
```

0 commit comments

Comments
 (0)