TIL. Promise

FE_JACOB 👨🏻‍💻·2021년 8월 20일
0

Today I learned

목록 보기
20/30

promise 에 대해 어렴풋이 알고 fetch 라는 문법을 사용했고 더 나아가 async await , axois 까지 사용했다.

async await 를 사용하면서 사용방법 보다는 근본적으로 어떻게 작동을 하는지 알아야겠다는 생각을 했다.

동기/비동기

우선 자바스크립트는 동기식(synchronous) 처리를 한다.
그래서

<script>
  console.log('a'); 
  console.log('b'); 
  console.log('c');
</script>

이렇게 했을때 순서대로 실행이된다.

비동기식(asynchronous) 처리를 하는 방법도 있는데 대표적으로 setTimeout함수를 사용한다.

<script>
  console.log('a');
  setTimeout(function(){}, 2000);
  console.log('c');
</script>

이렇게 실행을 한다고 했을때 차례대로 실행을 하는게 아닌 setTimeout 함수는 2초뒤에 실행되기 때문에 다른 함수를 먼저 실행하고 setTimeout을 그 다음 2초가 지났을때 실행하게 된다.
실행을 잠시 미루고 먼저 처리할 수 있는 함수들을 우선적으로 처리한다.

이렇게 제쳐둘 수 있는 함수가 몇개있다.

setTimeout, addEventListener, ajax 관련 함수들은 실행시점과 동작시점이 다르다.
다시말해 동작까지의 시간이 걸려서 잠시 제쳐두는데 webApi에 보관을 해둔다.
webApi는 자바스크립트의 내장기능이 아닌 브라우저 기능이다.
그래서 비동기식 처리를 할 수 있게된다.

콜백함수

콜백함수란,
함수안에 들어가는 함수를 콜백함수라고 한다.

비동기처리 상황에서 순차적으로 함수를 실행하고 싶을때 콜백함수를 사용한다.

만약 두개의 함수를 순차적으로 실행하고 싶다면 이렇게 ?

function first () {
	console.log("이것은 첫번째 함수")
}

function second () {
	console.log("이것은 두번째 함수")
}

first()
second()

이렇게 하면 순차적으로 실행이 될까???

답은 아니다, 비동기적으로 실행되는 특수성때문에 이렇게 쓴다고 순차적으로 실행이 되지는 않는다.
콜백함수로 불러내야 순차적으로 실행이 된다.

function first (callback) {
	console.log("이것은 첫번째 함수");
  	callback()
}

function second () {
	console.log("이것은 두번째 함수")
}

first(second)

이렇게 사용하면 첫째 함수가 실행되어야만 두번째 함수가 실행된다.
안에다가 직접 콜백함수를 입력할 수 도있다. 다만, 코드가 오른쪽으로 길어질 수 있다.
그럼 가독성이 떨어지게 돼서 Promise을 사용한다.

Promise

promise는 비동기처리 상황에서 순차적으로 함수를 실행할 수 있게 하고, 코드의 가독성을 높여준다. 그렇다고 동기를 비동기로 만들어주는 코드는 아니다, 단지 디자인패턴이며 평상시에는 동기적 코드실행을 하지만 특수함수로 인해 비동기적 실행을 하는것 뿐이다.

사용방법은

let promise = new Promise()

promise.then().catch()

콜백함수보다 promise 가 더 좋은 이유는 코드가 길어지거나 지저분해지지않는다.
즉, 가독성이 좋고 만약 콜백함수를 실행하지 못했을때의 대응(?)이 가능해진다.
catch안에 들어가는 코드들은 콜백함수 실행을 실패했을때 그 안에 있는 코드를 실행한다.

로그인이나 회원가입을 할때 비밀번호를 틀렸거나, 실패했을때의 error 코드를 보고 대응할 수 있다.

.catch(err => console.log(err.response) )

promise 안에 특정 코드를 작성을 하고 그게 성공을 했을때 혹은 실패를 했을때 promise 를 실행 시킬 수 있다.

let promise = new Promise(function(resolve, reject){
  let a = 1 + 1;
  resolve();
});

promise.then(function(){
// 실행하고 싶은 코드
}).catch(function(){
//실패했을 때 실행하고 샆은코드 
});

사실 promise가 어렵다. resolve ? reject ? Promise 안에 reject()를 선언하면 catch 안에 있는 코드가 실행된다. 그래서 resolve, reject 둘다 사용하지않고 하나만 사용을 한다.

profile
단순히 개발자로서 제게 있었던 일을 적는 공간입니다 ✍🏻

0개의 댓글