Promise, async/ await

💬 Javascript에서 Promise와 async/await를 쓰는 이유가 무엇인가?

📣 자바스크립트는 자바스크립트는 동기식 처리(Synchronous) 언어이다. (한 줄 씩 코드를 읽어가며 동작을 수행)

• 하지만 시간이 너무 오래걸리는 연산과 같이 동기적으로 코드를 수행했을 시 결과가 주어질 때까지 아무것도 하지 못하고 대기해야 한다.

• 이를 비동기식(asynchronous) 처리 할 수 있게 다음의 함수가 존재한다.
  ✓setTimeout
  ✓이벤트리스너
  ✓$.ajax()
  (이러한 함수는 특수성 덕분에 web API(실행 대기실) 이동하여 처리해준 후 실행)

• 웹 브라우저의 특수성
  오래걸리는 작업이 있으면 제껴두고 다른거부터 처리하는 비동기식 처리 가능

• 즉 자바스크립트는 오래 걸리는 연산 만나면 멈추지만 위와 같은 함수를 통해 작업이 오래 걸릴 것 같으면 다른 것부터 실행할 수 있게 된다.

📣 이를 순차적으로 실행하기 위해서 콜백함수를 집어 넣을 수 있다. 하지만...

• 처리 후 결과를 통해 다른 동작을 수행, 그 결과를 통해 다른 동작을 수행..........

• 하지만 이러한 콜백함수를 계속 집어넣게 되면 흔히 말하는 '콜백지옥'에 빠질 수 있음
  

📣 이러한 콜백 헬을 좀 더 쉽게 처리할 수 있는 방법으로 Promise, async/await가 존재한다.

---

🔎 Promise

내용이 실행은 되었지만 결과를 반환하지 않은 객체
then, catch를 만나면 결과를 반환함

• promise 변수 안에 담은 부분은 동기로 실행
• Resoleve(성공리턴값) -> then으로 연결
• Reject(실패리턴값) -> catch로 연결
• Finally 부분은 무조건 실행됨

출처: https://www.youtube.com/watch?v=3Ao3OroqQLQ&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=16

---

위의 패턴을 코드로 풀어쓰면 다음과 같다.

	let promise = new Promise(function(resolve, reject) {
    setTimeout(()=> {
        resolve();
    }, 1000)
});    // -> 성공, 실패 판정하게 해줌

//프로미스가 성공일 경우 실행 할 코드 : then
//        실패할 경우 실행 할 코드 : catch
//        성공유무 상관 없이 실행할 코드 : finally
promise
    .then(() => {
    console.log('성공, then 실행!')
    })
    .catch(() => {
    console.log('실패, catch 실행!')
})

/**
 * 프로미스의 상태 3가지
 * 성공 : resolve
 * 판정 대기중 : pending
 * 실패 : reject
 */

🔎 fetch(), JQuery 의 ajax() 의 경우 항상 promise를 return 한다.

• 즉 해당 함수를 쓸 경우 항상 promise가 남음
• fetch().then().catch() 와 같이 사용하여
• 성공시 실행할 코드, 실패 시 실행할 코드를 넣어줄 수 있음

---

📣 async/await는 Promise를 좀 더 읽기 편한형태로 쓸수 있게 해준다.

• async/await은 정보를 일정한 속도로 보낼 것을 요구하지 않는 데이터 전송 방법 이다 라고 정의되어 있다.
• 즉 비동기식처리를 해주고 싶은 함수 앞에 async를 붙이고 await을 통해 결과값을 받게 되는데 이는 promise를 반환(return) 하게 된다.

- async/await

async function findAndSaveUser(Users) {
	let user = await Users.findOne({});
    //await 실행 후 user 에 객체 담음
    //순서가 오른쪽 실행 후 왼쪽
    
    user.name = 'zero';
    
    user = await user.save();
    // await 실행 후 user에 저장
    user = await Users.findOne({ gender: 'm' });
 }
 
 - Async 함수는 항상 promise를 반환(return)
  - then이나 await 붙일 수 있음

위의 함수를 Promise로 바꾸면 다음과 같다.

- Promise

function findAndSaveUser(Users) {
	Users.findOne({})
    	.then((user) => {
        	user.name = 'zero';
            return user.save();
           })
        .then(user) => {
        	return.Users.findOne({ gender: 'm' });
           })
        .then(user) => {
        	//생략
           })
           	catch~~~~~

---

👉 정리하자면 자바스크립트, NodeJS(자바스크립트 런타임)은 <동기적(Synchronous) 메쏘드(method)라면 블로킹 연산>을 한다.

하지만 위와 같은 방법을 통해 메쏘드를 호출 할 때 <넌블로킹, 콜백을 받는 방식인 비동기적(asynchronous) 방식>으로 사용할 수 있다.