当 promise 用于动态部分时，如何将 static 和动态数据包含到快速渲染 function 中？

Question

I'm working on a web application with Node and Express and want to display content from different JSON files. Some contain static content like headings and column labels for tables. Some contain user data that can change dynamically. First, I made two different functions to read the JSON files:

const readStaticData = filePath => {
 fs.readFile(filePath, 'utf-8', (err, staticData) => {
    if (err) throw err;
    JSON.parse(staticData);
 }); 
};

and this for dynamic data:

const readData = filePath => new Promise((resolve, reject) => {
  fs.readFile(filePath, (err, fileData) => {
      if (err) {
          reject(err);
          return;
      }
      try {
          const object = JSON.parse(fileData);
          resolve(object);
      } catch(err) {
          reject(err);
      }
  });
});

And this is how my router.get() function looks so far:

router.get('/', (req, res) => {
  Promise.all([
    readData('./JSON/dynamicData1.json'),
    readData('./JSON/dynamicData2.json')
  ])
  .then((data) => {
    res.render('home',
      {
        dynamicData1: data[0],
        dynamicData2: data[1]
      }
    );
  })
  .catch((err) => {
    console.log(err);
    res.status(500).end();
  });
});

So I have my render function inside the Promise and I'm stuck how I can include the static content as well. Where can I put my readStaticData('./JSON/staticData1.json'); readStaticData('./JSON/staticData2.json'); readStaticData('./JSON/staticData1.json'); readStaticData('./JSON/staticData2.json'); functions to render? They don't depend directly on the dynamic content, eg a headline should always be there whether there is user data or not.

Hopefully I'm not missing important information, this is my first question here. And I'm also new to programming. If someone could help thanks a lot in advance!

Answer 1

I would do it something like this. You can just require a JSON file and have it ready to go as it is static.

const staticData = require('./path/to/staticData.json') 

// const readStaticData = filePath => {
//     fs.readFile(filePath, 'utf-8', (err, staticData) => {
//         if (err) throw err;
//         JSON.parse(staticData);
//     });
// };

const readData = filePath => new Promise((resolve, reject) => {
    fs.readFile(filePath, (err, fileData) => {
        if (err) {
            reject(err);
            return;
        }
        try {
            const object = JSON.parse(fileData);
            resolve(object);
        } catch(err) {
            reject(err);
        }
    });
});

router.get('/', (req, res) => {
    Promise.all([
        readData('./JSON/dynamicData1.json'),
        readData('./JSON/dynamicData2.json')
    ])
        .then((data) => {
            res.render('home',
                {
                    dynamicData1: data[0],
                    dynamicData2: data[1],
                    staticData
                }
            );
        })
        .catch((err) => {
            console.log(err);
            res.status(500).end();
        });
});

Answer 2

fs.readFile is always asynchronous, so you can use readData in both cases.

There's also a synchronous version of it: fs.readFileSync .