즉시 실행되는 비동기 함수

📌📌 html에서도 jQuery에서 document.ready() 처럼 페이지를 접속했을때 가장 먼저 보여지게 만드는 방법이 있다. 즉, 즉시 실행되는 비동기 함수이다.

(async function () {...})();

-> 이 형태는 즉시 실행되는 비동기 함수를 정의하고 실행한다. 맨 뒤에 () 빼먹으면 오류나니 꼭 넣어야한다!

예제코드

<script>
            const tbody = document.querySelector('tbody');
            (async function () {
                try {
                    const res = await axios({
                        method: 'GET',
                        url: '/api/post/all',
                    });
                    console.log('res', res);
                    for (let i = 0; i < res.data.result.length; i++) {
                        const html = `
                        <tr>
                            <td>${res.data.result[i].id}</td>
                            <td><a href="/post/${res.data.result[i].id}">${res.data.result[i].title}</a></td>
                            <td>${res.data.result[i].createdAt}</td>
                        </tr>
                    `;
                        tbody.insertAdjacentHTML('beforeend', html);
                    }//HTML을 요소의 마지막 자식으로 추가
                } catch (error) {
                    //console.log(error);
                    if (error.response && error.response.status == 401) {
                        document.location.href = '/login';
                    }
                }
            })();
</script>

➡️ 다른 코드보다 async/await 방법이 쓰인 함수의 형식을 보면 확인할 수 있다.