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

发布于 1周前 作者 sinazl 来自 nodejs/Nestjs

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

小弟初学 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 ，并处理，此时可以去获取Ｂ

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

})

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


Harmonyos Next教程
17 回复

这里应该是能访问到 A 的吧…


<br>var a = yield getData('A');<br>var b = yield getData('B');<br>render('template', {<br> 'a': a,<br> 'b': b<br>});<br>


<br>var a = getData('A'); // get a promise<br>var b = getData('B'); // get a promise<br><br>Promise.all([a, b]).then(function(a, b){<br> render('template', {<br> a: a,<br> b: b<br> })<br>});<br>

上面 promise.all().then 得到的是一个 array, 不是 a, b 两个参数

在 getDataB 的回调函数里面是可以访问到 A 的

多谢指正，看来基础还是 不够牢固

谢谢，回去看下 promise

http://nqdeng.github.io/7-days-nodejs/#6.2 没有 promise 的情况

用 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
});
}
}

async +1

感谢指点，解决了我的问题。

其他朋友的指点也很好，回去好好总结一下！

generator 都说了，为什么不说 async/await

用 ThinkJS 这些问题框架自动给解决了

因为我还没来得及看相关的内容，今天才了解了 promise

可以试试 promise.all

谢谢，正是用 promise.all 解决了这个问题

这个场景用 props 更好

在Node.js中，处理同时取多个数据并渲染的问题，通常涉及到异步操作和Promise的使用。你可以使用async/await语法来简化这种异步流程。以下是一个示例，展示如何使用async/await来同时获取多个数据并渲染结果。

假设你有两个API需要调用，一个是获取用户信息，另一个是获取产品信息。

const axios = require('axios');
const express = require('express');
const app = express();

// 示例API调用函数
async function getUserData() {
    const response = await axios.get('https://api.example.com/user');
    return response.data;
}

async function getProductData() {
    const response = await axios.get('https://api.example.com/product');
    return response.data;
}

// 路由处理函数
app.get('/', async (req, res) => {
    try {
        const [userData, productData] = await Promise.all([getUserData(), getProductData()]);
        // 渲染数据
        res.render('index', { user: userData, product: productData });
    } catch (error) {
        console.error(error);
        res.status(500).send('Internal Server Error');
    }
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

在这个示例中，Promise.all用于并行执行getUserData和getProductData两个函数，并在它们都完成后将结果传递给渲染函数。使用async/await可以使得异步代码看起来更像是同步代码，从而提高可读性和维护性。确保你有一个合适的模板引擎（如EJS或Pug）来处理res.render的渲染部分。

回到顶部