关于在map中使用fetch异步请求

Question

let city = [
    {
        name:'深圳',
        level:'1',
    },
    {
        name:'上海',
        level:'1',
    },
    {
        name:'重庆',
        level:'1',
    },
]

city.map((item)=>{
    item['isLeaf'] = fetch_get(.....).then( data != '' ? false : true )
})

大概代码思路是这样的

描述：
一个城市级联选择，我要动态的去异步请求一个端口看这个城市下面是否还有子节点。

问题：每次还没等全部数据都异步返回数据的时候，map循环就已经结束了，组件开始渲染，返回快的有数据，返回慢的就没有。

追加描述：
不能一次全部拿回所有数据，因为数据量太大一次拿回全部数据页面假死。

麻烦大家了z~!

Answer 1

let city = [{
    name: '深圳',
    level: '1',
  },
  {
    name: '上海',
    level: '1',
  },
  {
    name: '重庆',
    level: '1',
  },
]

city.map(async(item) => {
  item['isLeaf'] = (await fetch('')).data === ''
})

Answer 2

Promise.all

Answer 3

我更推荐用Promise.all 支持性更广。

下面是我自己的用过的类似的情景：

var DATA = {};

function getData(me) {
    url = epoint.dealRestfulUrl('themedataaction/' + me);

    return Util.ajax({
        url: url
    }).done(data => {
        DATA[me] = data;
    });
}

var promise = [];
['getUserInfo', 'getQuickMenu', 'getMsgCount', 'getMsgData', 'getThemes'].forEach(method => {
    promise.push(getData(method));
});

Promise.all(promise).then(function(data) {
    console.log(data); // 这里的data是一个数组 分别对应每个请求的返回数据。
    console.log(JSON.stringify(DATA, 0, 4));
});