[JavaScript]async

async는 말입니다.

 

비동기처리 패턴 중 하나.

 

Promise패턴과 같은 역할을 함!

https://hans-j.tistory.com/147

[JavaScript]웹개발시 자주 사용하는 메서드들

여기 중간에 Promise설명 써둠ㅋ

이런 구조다

짧게 말하면 Promise라는 객체는 비동기작업 (순차적으로 진행되지 않는 작업)에 대한 성공과 실패에 대한

결과를 미리 정해놓음.

---

또한 Promise패턴은

new Promise()이렇게 선언을 해주어야 .then이 사용가능하지만

이렇게

출처 : MDN

---

async는 !!

Promise선언 없이도 사용이 가능하다.

async를 function앞에 붙이면 함수 실행 후에 Promise 오브젝트가 남기때문!!

 

Promise선언 없이

.then()사용 가능

혹은 then키워드 대신 await키워드를 사용해도 된다.

그냥 대체품이라고 생각하면 됨. (await 키워드가 훨씬 문법이 간단간단)

await -어. 기다려

어 기다려. await은 언제쓰이냐??

출처 : MDN

복잡한 연산이 실행될 때

성공할 경우 => await

실패할 경우 => catch 로 

결과를 따로 설정할 경우.

 

근데!! 여기서 주의할 점은 await은 프로미스 실패시 에러가 나고 함수실행이 멈춘다.

 

이때 필요한것이 try{}, catch{}

---

문과출신인 나는

 

try 츄라이! 힘들어도 해봐 츄라이! 어 잠깐만 wait 기다려봐,

에러 catch! 잡았다 에러!

이렇게 머릿속에 담아뒀다.

---

성공하면 실행된 연산을 변수로 담을 수도 있다.

이렇게!

---

이건 왜 안될까?

 

그건바로..

 

프로미스의 함수는 버튼이 눌려야만! 실행이된다.

근데 이부분은 프로미스 함수의 return문이아니라

그냥 버튼누르면 실행되는 이벤트리스너의 return문이다.

 

자바스크립트는 function안이 빈칸이면 자동으로 return undefined을 채워 실행하기 때문에

출력 결과가 undefined으로 나왔다.

 

그럼 어떻게 짜야할까?

이렇게 짜세요 // 변수 선언을 let으로 했지만 const가 더 적절함

---

코딩애플강의를 듣고 작성하는 글입니다.