동기, 비동기
동기 : 나는 순서대로 일을 할거고 한번에 일 하나밖에 못함 누가 부르면 하던일 내려놓고 부르는 일 가서 일한다음 돌아와서 하던일 고대로 계속 함 (cpu 동기 우선순위 그거 생각하면 됨)
비동기 : 여러번에 일 동시에 진행함
자바스크립트는 싱글 스레드 언어 맞음
그래서 힙도 하나 콜스택도 하나
근데!브라우저는 멀티 스레드로 작동함
그러니까 브라우저에 내장된 자바스크립트 엔진만 싱글이고 브라우저는 멀티란 말임
브라우저의 Web api, task queue, event loop는 싱글인 자스랑은 다름
web api
- 브라우저, nodejs에서 제공되는 api
- ajax, timeout같은 비동기 작업 실행
task queue(callback queue), event loop
- web api에서 넘겨받은 콜백함수를 저장
- 자스가 하던 일이 완료되면 event loop가 콜스택에 콜백함수 추가
- event loop : task queue 일을 콜스택으로 옮김
결론, 난 입은 하나지만 무한리필회전초밥집에 앉아있어서 비동기 처리가 가능하다~
https://developer.mozilla.org/ko/docs/Learn/JavaScript/Asynchronous/Introducing
자스에서 사용하는 비동기 스타일
1. 콜백지옥
이벤트가 실행되면 호출되는 콜백 함수
나 실행끝나면 불러올 함수 = 콜백 함수
봅시다 여기서 콜백은 click 옆 두 번째 매개변수
btn.addEventListener('click', () => {
alert('You clicked me!');
let pElem = document.createElement('p');
pElem.textContent = 'This is a newly-added paragraph.';
document.body.appendChild(pElem);
});2. promise
어렵지 않아요 이름이 애매해서 자꾸 까먹는거지
- pending
- 작업이 끝났음(fulfilled)
👉실행은 성공했니 실패했니 (resolve or reject)
👉그래서 실행 뒤 return value는?
이 상황을 보장?한다
그래서 에러핸들링할떄 유용하게 잘씁니다 try catch 생각하셈
promise, then / catch / finally
여기서 then은 특이한게
첫번째 인자로 들어간 함수는 성공(resolve) 결과 값을 인자로 받고
두번째 인자로 들어간 함수는 실패(reject) 결과 값을 인자로 받음
https://developer.mozilla.org/ko/docs/Learn/JavaScript/Asynchronous/Promises
3. async/await
비동기함수를 동기함수로 바꾸고 싶을때 async function hello(){} 쓴다
-
async function hello(){안에서} await 키워드를 쓸수 있고
-
await가 붙으면 promise() 객체가 이행될때까지 기다리게 한다
여기서 알수 있는거처럼 async function hello()실행하면 무족권무조건 promise 객체 반환됨
언제나 promise 반환
그러니까 일단 promise 쓰고 이걸 더 편하게 쓰려고 async await쓴다 이말임
await = promise.then
그리고 try catch 쓸수 있음 편안
https://ko.javascript.info/async-await
(+)
비동기적이란 말은 input이 생기거나 event가 발생하기전까지 하던일을 멈추고 대기하는 일이 잦다는거
1. 가장 베이직한 비동기 프로그래밍은 콜백
콜백은 다른 함수에 전달하는 함수, 콜백을 전달받은 함수는 트리거가 생기면 우리가 작성한 함수를 콜백=호출함
콜백함수는 setinterval, settimeout, 이벤트핸들러/리스너가 있음
2. 네트워크요청 또한 비동기 -> 요청을 날리고, 응답을 받았을때 호출할 콜백을 작성한다
3. 파일리더도 콜백, 이벤트 사용 -> 파일을 읽고, 콜백호출
비동기를 단순화하도록 설계된 기능 프라미스
프라미스는 비동기 작업의 결과를 나타내는 객체, 프라미스는 결과가 준비됐을수도 아닐수도 있는 애매모호한 애임, 그래서 값을 동기적으로 가져올순 없음 대신 값이 준비됐을때 콜백함수 호출하도록 할순 있음
프라미스 객체에 콜백을 등록하면 콜백은 비동기 작업이 끝나면 호출됨
1. 프라미스 객체엔 then() 메서드가 있음 -> 콜백함수를 then() 메서드로 전달, 프라미스 객체가 정상적으로 완료(fulfill)되면 동작 / 만약 예외가 생기면(reject) then()의 두번째 인자인 함수로 전달, then은 반환된 프라미스 객체를 호출, then 메서드를 호출할때마다 새 프라미스 객체 반환
2. 프라미스의 catch 메서드는 null을 첫번째 인자, 에러처리 콜백은 두번째 인자로 전달하는 then임
3. finally메서드는 호출한 프라미스가 완료될때 호출됨. 얘도 마찬가지로 새 프라미스 객체 반환
promise.all : 비동기작업을 병렬로 실행할때 씀, 병렬 중 하나라도 거부되면 리턴 프라미스도 거부
promise.allsettled는 리턴된 프라미스를 절대 거부하지 않으면서 입력 프라미스 전체가 완료되기 전ㄱ에는 이행안함
async await : 읽기쉬운 코드를 위해 있음
프라미스를 받아 리턴값이나 예외로 바꿈
await라는건 정한 프라미스가 완료되기전엔 아무것도 안하도록 한다는거
await는 async로 선언된 함수 안에서만 사용가능
async는 묵시적으로 프라미스 리턴
