[JavaScript] Async & Await

Async & Await

async는 함수의 앞에 붙여서 해당 함수가 비동기 함수임을 나타내며, await는 비동기 함수의 실행 결과를 기다리는 키워드이다. 

then 대신 await 사용하면 된다.

const h1El = document.querySelector('h1')
const ulEl = document.createElement('ul')
ulEl.classList.add('users')
document.body.append(ulEl)


h1El.addEventListener('click', () => { // h1El을 클릭했을때
    ulEl.textContent = 'Loading...' //ulEl에서는 Loading...이 보인다.
    fetch('주소') // 서버로 데이터로 가지러 가서 데이터를 가지고 오면 
    .then(res => res.json())
    .then(data =>{
        console.log(data);
        const {users} = data // users은 사람 정보를 가지고 있는 배열 데이터
        const liEls = users.map(user => {
            const liEl = document.createElement('li')
            liEl.textContent = user.name
            const imgEl = document.createElement('img')
            imgEl.src = user.photo?.url || '이미지주소'
            if(!user.photo){
                liEl.classList.add('no-photo')
            }
            liEl.prepend(imgEl) // 이미지 앞쪽에 이름을 추가한다.
            return liEl // 새로운 배열을 만든다.
        })
        ulEl.textContent = '' // map이 끝나면 Loading...이 빈 문자로 초기화
        ulEl.append(...liEls) // liEls의 배열 연산자를 객체연산자로 바꾼다.
    })
})

 

 

위에 있는 코드는 정보를 가지고 오는 코드이고 이제 출력하는 코드를 만들겠다.

const h1El = document.querySelector('h1')
const ulEl = document.createElement('ul')
ulEl.classList.add('users')
document.body.append(ulEl)


h1El.addEventListener('click', async() => { // h1El을 클릭했을때
    ulEl.textContent = 'Loading...' //ulEl에서는 Loading...이 보인다.
    const res = await fetch('주소') // 서버로 데이터로 가지러 가서 데이터를 가지고 오면 
    const data = await res.json()
    console.log(data);
    const {users} = data // users은 사람 정보를 가지고 있는 배열 데이터
    const liEls = users.map(user => {
        const liEl = document.createElement('li')
        liEl.textContent = user.name
        const imgEl = document.createElement('img')
        imgEl.src = user.photo?.url || '이미지주소'
        if(!user.photo){
            liEl.classList.add('no-photo')
        }
        liEl.prepend(imgEl) // 이미지 앞쪽에 이름을 추가한다.
        return liEl // 새로운 배열을 만든다.
    })
    ulEl.textContent = '' // map이 끝나면 Loading...이 빈 문자로 초기화
    ulEl.append(...liEls) // liEls의 배열 연산자를 객체연산자로 바꾼다.
})

 

 

이미지 불러올 때까지 로딩 이미지 추가 

const h1El = document.querySelector('h1')
const ulEl = document.createElement('ul')
ulEl.classList.add('users')
document.body.append(ulEl)


h1El.addEventListener('click', async() => { // h1El을 클릭했을때
    const loaderEl = docymnet.createElement('div')
    loaderEl.classList.add('loader')
    ulEl.innerHTML = ''
    ulEl.addend(loderEl)
    ulEl.textContent = 'Loading...' //ulEl에서는 Loading...이 보인다.
    const res = await fetch('주소') // 서버로 데이터로 가지러 가서 데이터를 가지고 오면 
    const data = await res.json()
    console.log(data);
    const {users} = data // users은 사람 정보를 가지고 있는 배열 데이터
    const liEls = users.map(user => {
        const liEl = document.createElement('li')
        liEl.textContent = user.name
        liEl.dataset.photo = user.photo?.url || '이미지주소' //liEl에 데이터를 임시로 보관하는 용도 
        if(!user.photo){
            liEl.classList.add('no-photo')
        }
        const loaderEl = document.createElement('div')
        loaderEl.classLsir.add('loader')
        liEl.prepend(imgEl) // 이미지 앞쪽에 이름을 추가한다.
        return liEl // 새로운 배열을 만든다.
    })
    loaderEl.remove()
    ulEl.append(...liEls) // liEls의 배열 연산자를 객체연산자로 바꾼다.
    liEls.forEach(async liEl => {
        const imgEl = await loadImage(liEl.dataset.photo)
        liEl.prepend(imgEl)
        liEl.querySelector('.loader').remove()
    })
})


function loadImage(src) { // 이미지가 로딩된 후에 .loader를 지운다.
    return new Promise(resolve => {
        const imgEl = document.createElement('img')
        imgEl.src = src
        imgEl.addEventListener('load', () =>{
            resolve(imgEl)
        })
    })
}