promise for循环

最新推荐文章于 2024-01-02 17:28:11 发布

半个开心果

最新推荐文章于 2024-01-02 17:28:11 发布

阅读量1k

点赞数

分类专栏： javascript 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_37299479/article/details/125990632

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

场景：在地图上画很多个点，前提是需要把每个坐标进行一个转换，这里遇到了异步操作，而且是循环里面包含着异步，一直对promise不是很明白，然后经过朋友指点，解决方式如下：

使用promise all 来解决，具体代码如下：

function addPointLayer(map, targetArr) {

  var pointLayerArr = [];
  let opeaArr = [];
  opeaArr = targetArr.map(item => {
    return new Promise((resolve, reject) => {
      console.log(item.point, "==转换之前");
      convertTask
        .convertCoord([item.point], {
          from: 1
        })
        .then(result => {
          console.log(result[0], "==转换之后")
          pointLayerArr.push({
            type: "Feature",
            geometry: {
              type: "Point",
              coordinates: result[0]
            }, // 所有相关数据放入prop中，前缀都为下划线
            properties: {
              origin: item,
              name: item.name,
              point: result[0],
              iconId: item.type1 + "_" + item.type2,
              iconSize: +iconSize[item.type3],
              SBID: item.SBID,
              SBLX: item.SBLX,
              YSZT: item.YSZT,
              ZGYY: item.ZGYY
            }
          });
          resolve();
        })
    })

  })
  Promise.all(opeaArr).then(() => {
    console.log(targetArr, "=targetArr")
    map.getLayer("markPoint") && map.getSource("markPoint").setData({
      'type': 'FeatureCollection',
      'features': pointLayerArr
    });
  })

}

在这以前只会解决单个的，遇到循环就不会变通了，这下学到了，嘻嘻开心

值得注意的一点是：all方法的话，只有里面有一个异步函数报reject，那all方法就会返回reject