循環內調用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();
  }
}

親測可用，希望能幫到你~