자바스크립트의 비동기

자바스크립트로 작업을 하면서 가장 중요한 부분 중 하나는 비동기처리라고 생각한다.

그 동안 자바스크립트를 사용해오면서, 패러다임이 조금씩 바뀌어 왔는데.

처음 자바스크립트를 사용할때는 통신 후 callback function 으로 리턴값을 넘겨서 처리하였다. 

이해를 돕기위해 예제를 통해 하나씩 짚어가고자 한다.

 

아래는 유저의 닉네임을 통해 , 유저의 정보를 요청한 후 유저의 아이디로 유저의 책 정보들을 가져오는 일련의 로직이다.

 

function methodA(nickName, callback){
  $.get( `/api/v1/account/${nickName}`, function( data ) {
    callback(data)
  })
}

function methodB(account, callback){
  $.get(`/api/v1/account/${account.id}/books`, function( data ) {
    callback(data)
  })
}

function getUserBookList(nickName, callback){
  methodA(nickName, function(account){
      methodB(account, function(bookList){
		callback(bookList)
      })
  })
}

getUserBookList("자바스쿠립트",function(bookList){
	console.log("나의 bookList",bookList)
})

 

초기 자바스크립트는 이런식으로 비동기적인 처리들의 sync 를 맞추어 처리할 경우, callback, callback, ... 방식으로 중첩이 되게 된다.

가독성이 현저하게 떨어지게된다.

 

여러 방식들이 있지만, 그 다음으로 Promise 객체를 이용한 비동기제어 방식을 얘기드리고 싶다.

Promise 객체를 통한 비동기 제어를 통해 위의 코드를 고친다면 아래처럼 보이게 된다.

 

function getUserBookList(nickName) {
  return fetch(`api/v1/account/${nickName}`)
      .then(response=>response.json)
      .then(account=>account.id)
      .then(accountId=>fetch(`/api/v1/account/${accountId}/books`))
      .then(response=>response.json)
  });
}

getUserBookList("자바스쿠립트").then(bookList => console.log("나의 bookList",bookList))

 

현재에는 이런식의 Promise 객체를 체이닝이 아닌 async, await 지시자를 붙임으로써 보다 직관적이고 가독성 있는 코드를 작성 할 수 있다. 

 

아래는 위의 코드를 async, await 로 변환하여 사용한 예이다.

 

async function getUserBookList(nickName) {
	const accountRaw = await fetch(`api/v1/account/${nickName}`)
    const account = await accountRaw.json()
    const bookListRaw = await fetch(`/api/v1/account/${account.id}/books`)
    const bookList = await bookListRaw.json()
	return bookList
    
}

getUserBookList("자바스쿠립트").then(bookList => console.log("나의 bookList",bookList))

 

여기까지가 현재까지 많이 사용되고 있는 자바스크립트의 비동기 제어이다.