在执行async函数之前呈现的Express JS页面



express.js路由有问题。我想在用户打开/餐厅/地图时获取所有餐厅。问题是函数gm.geocode是异步的,所以页面是在执行该函数之前呈现的。如何在正确的时间获取可变地图数据,以及何时加载页面/餐厅/地图?正确的方法是什么?

var express = require('express');
var router = express.Router();
var gm = require('googlemaps');
var fs=require('fs');
var staticDB=require('./staticDB.js');
var mapsData=[];

/* GET home page. */
router.get('/', function (req, res, next) {
//not important
});
router.get('/map/', function (req, res, next) {
    var counter=0;
    console.log('Request URL:', req.originalUrl);
    for (i = 0; i < staticDB.addresses.addresses.length; i++) {
        gm.geocode(staticDB.addresses.addresses[i].street + ", " + staticDB.addresses.addresses[i].city, function (err, data){
            mapsData.push({
                "name": staticDB.restaurants.restaurants[counter].name,
                "location": data.results[0].geometry.location
            });
            counter++;
        }, false);
    }
    res.render('map', {
        title: 'title',
        restaurants: mapsData
    });
});
module.exports = router;

永远不要使用常规的for循环来处理异步流。有一些模块可以为您处理这些场景,比如async,甚至promise。在您的情况下,您的代码应该是这样的,使用async.each(我没有测试它):

router.get('/map/', function (req, res, next) {
  var counter=0;
  console.log('Request URL:', req.originalUrl);
  async.each(staticDB.addresses.addresses, function (address, cb) {
    gm.geocode(address.street + ", " + address.city, function (err, data){
        mapsData.push({
            "name": staticDB.restaurants.restaurants[counter].name,
            "location": data.results[0].geometry.location
        });
        counter++;
        cb();
    }, false);
  }, function (err) {
    if (err) {
      return res.render('error', { error: err });
    }
    res.render('map', {
      title: 'title',
      restaurants: mapsData
    });
  });
});

最新更新