비동기 프로그래밍

비동기 프로그래밍이란?

프로그래밍 코드가 순차적으로 실행되지 않는 것.
페이지 전체를 렌더링 하지않고 부분적으로 필요한 부분만 업데이트 하는 프로그래밍.

XHR 및 Promise

기본 AJAX 통신기법은 XMLHTTPRequest을 사용했었다.
나중에 Jquery가 등장하여 AJAX를 사용법/크로스브라우징 등에서 편리하게 사용 가능하게 되었으며, 코딩방식은 이벤트기반, 콜백함수를 통한 방식이었다.
하지만 콜백함수 방식은 콜백 안에 콜백 콜백지옥 이슈가 있었고, 이후에 Promise 객체가 XMLHTTPRequest(콜백 방식) 대체하였다.
Fetch api가 Promise 기반이다.
오늘날에는 Fetch api 라이브러리 중 하나인 Axios라는 라이브러리가 유명하다.
(Promise는 동기 함수 then이 비동기)

ASYNC/AWAIT

기존 비동기코드에서 실행 순서를 보장 받으려면 콜백 함수나 then 함수를 사용해야 했지만, async/await은 짧은 키워드로 실행 순서를 보장해준다.

async/await 적용 전

function prom(that, sec) {
    return new Promise(function(resolve, reject){
        setTimeout(function() {
            console.log(that)
            resolve('data')
        },sec)
    } )
};

function test1() {
    console.log(prom(1, 2000))
    console.log(prom(2, 4000))
    console.log(prom(3, 1000))
}
test1()

결과
// Promise {<pending>}
// 3
// 1
// 2

async/await 적용 후

function prom(that, sec) {
    return new Promise(function(resolve, reject){
        setTimeout(function() {
            console.log(that)
            resolve('data')
        },sec)
    } )
};

async function test1 () {
    await prom(1, 2000)
    await prom(2, 3000)
    await prom(3, 1000)
}
test1()

결과
// Promise {<pending>}
// 1
// 2
// 3