循环内调用ajax接口只调用一次的问题

最近做开发有个功能：从数据库读取十条记录，然后for循环这十条记录，用每条记录中的一个属性再去阿里云上去查询图片地址，

先期直接尝试：

getLast10EventList=async ()=>{
  const { data, isError } = await api.get( `${window.reqPrefix}/nds/getLast10EventList` )
  if ( !isError && data ) {
     data.data.map((item)=>{
       const ali_url = this.getPngUrlByAli(item.evt_image_url)
       item.ali_url = ali_url 
     })
    this.setState({eventList:data.data})
  }
}

getPngUrlByAli=async(evtImageUrl)=>{
  const { isError, data } = await api.get(
    `${reqPrefix}/evtDetail/getOssVideoImgUrl`, {
      videoImgUrl: evtImageUrl
    } );
  if ( data && data.success ) {
    return data.resultUrl
  }
}

上面代码看着简单没毛病，但是data.data.map()这个循环里只会调用this.getPngUrlByAli(item.evt_image_url)这个接口一次，看入参是遍历数据的最后一次，在getPngUrlByAli()方法里打印日志，发现调用的次数没问题，只会是异步导致的，调用太快导致前面的九次调用都忽略了，只有最后一次返回，那改为同步ajax调用就行了

getLast10EventList=async ()=>{
  const { data, isError } = await api.get( `${window.reqPrefix}/nds/getLast10EventList` )
  if ( !isError && data ) {
    if(window.getShortVideoFromAliFlag==='true'){//图片地址需要从阿里获取
      var xmlHttp = this.creatXMLHttpRequest();
      data.data.map((item)=>{
        xmlHttp.onreadystatechange = function() {
          if (xmlHttp.readyState == 4) {
            if (xmlHttp.status == 200) {
              var result = xmlHttp.responseText
              item.img_url_ali = JSON.parse(result).resultUrl
            }
          }
        }
        xmlHttp.open("GET", `${reqPrefix}/evtDetail/getOssVideoImgUrl?videoImgUrl=`+item.evt_image_url, false);
        xmlHttp.send(null);

      })
    }
    this.setState({eventList:data.data})
  }
}

creatXMLHttpRequest=()=> {
  var xmlHttp;
  if (window.ActiveXObject) {
    return xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } else if (window.XMLHttpRequest) {
    return xmlHttp = new XMLHttpRequest();
  }
}

亲测可用，希望能帮到你~