[TIL][JS] Promise, Callback

Asynchronous JavaScript

보통 자바스크립트 코드는 동기적(synchronously, 요청과 그 결과가 동시에 일어난다는 뜻이다)으로 실행된다. 동기적인 연산들은 이전 연산이 얼마나 걸리는지와 상관없이 기다렸다가 실행된다. 자바스크립트에선 콜백함수, async-await, promises를 사용하여 기다림 없이 비동기적으로(asynchronous, 요청과 결과가 동시에 일어나지 않는다) 실행할 수 있다.

동기와 비동기

프로그래밍에선 코드에서 명령이 실행되는 순서를 기준으로 동기와 비동기로 나뉜다. 동기식은 가장 일반적인 형태로 작성한 코드의 순서에따라 하나씩 실행된다. 비동기식은 처리시간을 기반으로 실행된다. 실행 중에 시간이 소요되는 작업을 해야하는 경우 자바스크립트는 비동기적으로 다음 명령을 실행하게 된다.

callback function

콜백함수는 백그라운드에서 코드를 실행하는 함수를 호출할때 인자로써 특정되어지는 함수이다. 백그라운드 코드 실행이 끝날때, 콜백함수는 실행된다. 다른함수의 인자로써 콜백함수를 전달하게 될때 단지 그 함수의 참조값만을 전달하기 때문에 콜백함수는 즉시 실행되지 않는다.

Promises

promises는 모던 웹 API에서 볼수 있는 비동기 코드의 새로운 스타일이다.

fetch('products.json').then(function(response) {
  return response.json();
}).then(function(json) {
  products = json;
  initialize();
}).catch(function(err) {
  console.log('Fetch problem: ' + err.message);
});

fetch() 함수는 네트워크로부터 fetch하길 원하는 url주소를 매개변수로 받고 promise를 리턴하게 된다. Promise는 비동기 작업의 성공이나 실패를 나타내는 object 이다.

then() : 이전 작업이 성공적으로 끝날때 실행하게 될 콜백함수를 포함한다. 그리고 콜백함수는 이전의 성공적인 작업의 결과를 받아서 다른 작업을 실행할 수 있다. 각각의 then() 블록은 또다른 propmise를 리턴하게 되어 수많은 .then()블록으로 연결할 수 있다. (이는 수많은 비동기 작업들을 순차적으로 실행되게 만들 수 있다.)

catch() : .then() 블록이 실패할때 실행되는 부분이다. (동기적인 try...catch 와 비슷하다) error 객체(발생하는 에러의 종류를 알 수 있는)는 catch() 내부에서 만들어 질 수 있다.

Promises vs Callback

• then() 연산자를 사용해서 수많은 비동기 작업을 함께 연결할 수 있다. 이러한 작업을 콜백을 사용해서 한다면 훨씬 더 어렵고 복잡한 코드가 된다(callback hell)
• promise callbacks는 이벤트 순서에 있는 엄격한 순서에 따라 호출된다.
• 에러 핸들링에 용이하다