最近做开发有个功能:从数据库读取十条记录,然后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(); } }
亲测可用,希望能帮到你~