前端JS在循环语句中调用API并保证循环语句外同函数作用域的代码同步执行

一、前言

在开发中，可能难免会遇到需要将某个数组遍历获取指定字段的值，然后用此值作为参数来调用API的场景。那么，JS如何在循环语句中调用API并且保证同函数作用域中的其他代码同步执行，并且能使用循环语句中多次调用API请求到的全部数据？我们一起来看看：

二、问题描述、分析和解决

2.1、问题描述

这几天，在进行一个使用到百度地图多点标注的功能开发，标注点的数量，经纬度坐标值，以及其他数据，均需动态用API获取。此API有一个参数，需从一个对象数组（[{},{},{},…]）中获取，这个数组中的每个对象元素中有此API的参数，所以需要用到循环遍历并调用API。如何在一个函数作用域中，先执行完这个含有多次接口调用的循环，再执行此循环语句后面的代码成了一个不大不小的问题。

2.2、问题分析（求道）

对于这种情况，我想要的执行逻辑是：每循环一次，得到一个value，然后用这个value作为参数调用一次API得到一条目标数据。最后，将在循环语句中多次调用API得到的数据，存储到sessionstorage中供在地图中打点标注。因为只有让此函数作用域中的代码都同步执行，才能保证最终数据的完整和正常。
所以，此问题解决思路的方向，就是要让所有的异步变同步，此函数作用域内，所有的代码同步执行。

2.3、问题解决（求术）

有术无道止于术，有道无术术可求。
有上面求道部分的支持，接下来解决这个问题就变得明了和直接了：

• 我计划用async await来使异步“变”同步；
• 找一个可以使用async await的循环语句（这个不是废话，诸君接着看）；
  好了，执行步骤就是这两步，接下来直接上代码：

...
  // 因为我是基于React开发，所以函数定义形式只供参考。async关键字登场
  const recycleGetData = async (data) => {
   
    const projAddInfo = [];
    // 用async await保证有异步调接口的循环体变同步，对循环语句种类有一定限制，我这里使用的是for循环,用for of循环替代fro循环也可以达到预期效果，别的循环诸君也可以试试，map是不可以的，我试过了。
    for (let i