JS 비동기처리 then - async await

Question

storageRef.listAll().then(foldor=>{ var template = ''; foldor.prefixes.forEach(forderName=>{ const listRef = storageRef.child('/'+forderName.name+''); listRef.listAll().then(res=>{ template +=''; res.items.forEach(image=>{ image.getDownloadURL().then(url=>{ template += ''; console.log(template) }) }) template +=''; }) }) template +='

'; $('.main').append(template); }) then을 쓰는 구조에서(async ()=>{ var template = ''; const foldor = await storageRef.listAll(); foldor.prefixes.forEach (async(forderName)=>{ const listRef = await storageRef.child('/'+forderName.name+''); listRef.listAll(async(res)=>{ template +=''; await res.items.forEach(async (image)=>{ await image.getDownloadURL(async (url)=>{ template += ''; }) }) template +=''; }) }) template +='

'; $('#imgtd').append(template); console.log("hi"); }) async await으로 구조 변경하였습니다똑같은 코드지만 기존의 then으로 할시 요청에 대한 처리를 하기 전에 table을 만들어서 제대로된 template(html구문)가 만들어지지 않아서 순차적으로 처리하기위해 async await으로 바꿧는데 이렇게 바꾸는게 맞나요..?async함수안에 console.log를 찍어도 아무값도 안나와서 이게 맞는지 확인을 할수가 없네요..

kenu · Answer

(async ()=>{ var template = ''; const foldor = await storageRef.listAll(); foldor.prefixes.forEach (async(forderName)=>{ const listRef = await storageRef.child('/'+forderName.name+''); listRef.listAll(async(res)=>{ template +=''; await res.items.forEach(async (image)=>{ await image.getDownloadURL(async (url)=>{ template += ''; }) }) template +=''; }) }) template +='

'; $('#imgtd').append(template); console.log("hi"); })()

지녁 · Answer

감사합니다! 이걸 몰라서 한참 헤맸네요

JS 비동기처리 then -> async await

3개의 답변

Q&A 목록