Node.js 同时取多个数据并渲染问题

2016-07-15 11:58:59 +08:00
 wuhuaji

小弟初学 node ,有个地方想不明白,想请教一下。

例如我现在要取得 A 、 B 两个数据,并渲染到模板中

传统的渲染模型大概是这样:

var A = getDataA('param')
var B = getDataB('param')

// 这里,获取到了 A 、 B 两个数据,然后一并作为数据渲染到模板中:
render('template',{
    'a':A,
    'b':B
})

但是因为 node 中的异步操作,一般都不直接返回结果,而是传入一个回调函数,处理获取的结果

getDataA('param',funciton(A){
	//这里获取到了 A ,并处理,此时可以去获取B
    
	getDataB(param,function(B){
		//获取到 B
		//这里就访问不到 A 了,此时在这里渲染出去,就只能渲染 B,有没有什么办法 A/B 同时获取,并渲染模板
     render('template',{
     	'b':B
     })
	})
})

请教有什么好的解决办法,或者是我又想不到的地方?

4716 次点击
所在节点    Node.js
16 条回复
aivier
2016-07-15 12:14:19 +08:00
这里应该是能访问到 A 的吧...
Jeremial
2016-07-15 12:14:39 +08:00
```
var a = yield getData('A');
var b = yield getData('B');
render('template', {
'a': a,
'b': b
});
```


```
var a = getData('A'); // get a promise
var b = getData('B'); // get a promise

Promise.all([a, b]).then(function(a, b){
render('template', {
a: a,
b: b
})
});
```
Jeremial
2016-07-15 12:16:01 +08:00
上面 promise.all().then 得到的是一个 array, 不是 a, b 两个参数
haozhang
2016-07-15 12:16:29 +08:00
在 getDataB 的回调函数里面是可以访问到 A 的
wuhuaji
2016-07-15 12:21:34 +08:00
@haozhang 多谢指正,看来基础还是 不够牢固
wuhuaji
2016-07-15 12:23:21 +08:00
@Jeremial 谢谢,回去看下 promise
zhuangzhuang1988
2016-07-15 12:31:57 +08:00
sherlocktheplant
2016-07-15 12:46:15 +08:00
用 async 库的话比较简单

async.parallel([
function(callback) { getData('A', callback) },
function(callback) { getData('B', callback) }
], function(err, results){
var a = results[0];
var b = results[1];
render('template', {
a: a,
b: b
});
});

不用库的话
var a,b, aFetched, bFetched;

getData('A', function(result){
a = result;
aFetched = true;
checkResults();
});

getData('B', function(result){
b = result;
bFetched = true;
checkResults();
});

function checkResults(){
if(bFetched && bFetched) {
render({
a: a,
b: b
});
}
}
Mirachael
2016-07-15 13:18:17 +08:00
async +1
wuhuaji
2016-07-15 14:14:22 +08:00
@Jeremial 感谢指点,解决了我的问题。

其他朋友的指点也很好,回去好好总结一下!
123s
2016-07-15 16:11:26 +08:00
generator 都说了,为什么不说 async/await
welefen
2016-07-15 18:23:44 +08:00
用 ThinkJS 这些问题框架自动给解决了
wuhuaji
2016-07-15 19:02:18 +08:00
@123s 因为我还没来得及看相关的内容,今天才了解了 promise
marvinwilliam
2016-07-15 21:02:49 +08:00
可以试试 promise.all
wuhuaji
2016-07-15 21:48:47 +08:00
@marvinwilliam 谢谢,正是用 promise.all 解决了这个问题
klesh
2016-07-15 23:26:41 +08:00
这个场景用 props 更好

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/292673

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX