ola-toolkit
Version:
ola 开发工具套件
116 lines (92 loc) • 2.93 kB
Markdown
# wait
阻塞式路由装饰器
### 为什么使用 wait
在 SPA 架构中，UI 骨架会先于数据被加载，当路由切换后，往往会出现一段时间的空白界面，或者在空白界面上浮现一些 loading 效果，随着数据被装载，页面重新被渲染，视觉上才重新被填充，
这个流程大致如下：
wait 装饰器可以以非常简单的方式，对这个流程进行优化，优化后的流程大致如下：
这个流程大体上模拟了浏览器原生页面切换效果，这样的效果避免了单页应用路由切换后、数据装载前的空页面视觉，和空页面到数据装载后的大面积视觉跳动，
同时，还能在前进、后退时保持住上一个浏览的位置，它被多数用户体验良好的站点采用，
例如 [Youtube](https://youtube.com) 与 [Github](https://github.com)。
@wait 作用于页面容器组件 (pages/)
通过 @wait 直接发起请求：
```javascript
import {Ajax, wait} from 'ola-toolkit';
@wait([{
prop: 'asyncList',
* effect({match: {params: {page = 1}}}, {call}) {
const payload = yield call(Ajax.get, {
url: '//mytask.jd.com/api/task/taskHall',
params: {
species: 0,
status: 0,
page,
}
});
return payload;
}
}])
export default class WaitPage extends Component {...}
```
通过 @wait 派发 action
```javascript
import {Ajax, wait} from 'ola-toolkit';
@wait([{
prop: 'asyncList',
* effect({match: {params: {page = 1}}}, {call, put}) {
try {
const payload = yield call(Ajax.get, {
url: '//mytask.jd.com/api/task/taskHall',
params: {
species: 0,
status: 0,
page,
}
});
yield put({
subject: 'asyncList',
act: 'success',
payload,
});
} catch (e) {
yield put({
subject: 'asyncList',
act: 'fail',
payload: e,
});
}
}
}])
export default class WaitPage extends Component {...}
```
或者使用 promise:
```javascript
import {Ajax, wait} from 'ola-toolkit';
@wait([{
prop: 'asyncList',
promise: ({match: {params: {page = 1}}}) => {
return Ajax.get({
url: '//mytask.jd.com/api/task/taskHall',
params: {
species: 0,
status: 0,
page,
}
});
}
}])
export default class WaitPage extends Component {...}
```
## API
@wait(\[config\])
### config
| key | 说明 | 类型 | 返回值 |
| --- | --- | --- | --- |
| prop | 注入到 prop 的 key | string | boolean |
| effect | 使用 effect 获取数据 | generatorFunction(props, sagaEffects) | saga |
| promise | 使用 promise 获取数据, 若配置了 effect, 则该项不生效 | function(props) | promise |