자바스크립트 동기 처리 / promise 문법

자바스크립트는 동기식 처리임 - 코드 한줄씩 실행

비동기식으로 되는 함수가 따로 있음 -

오래걸리는 작업 있으면 제껴두고 다른거부터 처리해주는 방식 (자바스크립트를 실행하는 브라우저때문에 가능)

이벤트리스너,타임아웃,ajax같은거 - 이걸 web api로 보냄 (실행 대기실)

-대기하다가 다시 가져옴 

-만약에 이런거 밑에 다른 코드가 있으면 그거먼저 실행해줌

 

JS를 순차적으로 실행하고싶으면 ? 콜백함수 사용 (함수안에 함수넣기)

Log 1

Set timeout (log 2,1000) - 이렇게 하면 순차적으로 1 하고 2 

이벤트리스너도 ‘웅엥웅’ 하면 - 콜백함수 실행됨 

 

 

첫째함수()

둘째함수() - 이렇게 한다고해도 순차적으로 실행 안될수도 있음 (첫째함수 안에 ㅈㄴ 복잡한게 있거나 위 같은 상황이 있으면 안될수도 있음)

————

이럴때 첫째함수(둘째함수) - 이렇게하면 순차적 쌉가능

 

Function 첫째함수(구멍){

console.log(1)

구멍();}

 

Function 둘째함수(){

console.log(2)}

 

첫째함수(둘째함수);

 

문제점 - 함수이름 안지어놨을 때 저 둘째함수에 코드 길~게 쓰고 또 그 뒤에 함수 길~게 쓰면 코드가 지저분해진다고함.

이런거때문에 promise -then/catch 같은 함수를 쓰는데 기본형식은

else 뒤에 실패() 넣어놨었는데 캡쳐안됨..

프로미스는 이게 성공인지 실패인지 판정을 내려주는 거라고 보면 된다. 그래서 혹시 안에 있는 함수가 성공을 하면 then 뒤에 함수가 실행이 되는거고 실패한다면(실행이 불가능) catch 뒤에 함수를 실행해준다고 생각하면됨

 

여기서는 그냥 버튼 하나 잡아놓고 클릭할때 이 버튼의 name이 저거랑 같으면 출력해줘라 ~ 라는 코드를 대충 짜놓고(저건 절대 실행할수없음) 당연히 if문이 실행 안되니까 else에 있던 실패()가 실행이 됨 - 이게 저 catch에 있는 함수가 실행이 되는거임 

이게 더 이해하기 쉬운듯

img파일을 하나 해놓고 로딩 성공/실패를 가려주는 promise를 해놔서 load되면 성공() - then 뒤에쓴 함수실행 / error되면 실패() - catch뒤에쓴 함수 실행되게 해놓기 

일단 제일 중요한건 성공/실패의 조건을 나눠놓고 해당하면 어떤 함수를 실행할지 설정하기 ( 말로는 성공,실패라고 했지만 조건만 다르게 나눠놔도 될듯?)