비동기
- 비동기 : 순서를 제어할 수 없다는 뜻❗️
- 비동기 제어를 위해 👉🏽 콜백 함수
- 콜백 함수를 보기 편하게 (작업은 콜백함수와 동일) : Promise, async/await
- 비동기 함수
setTimeout때문에 콘솔에 "A", "B", "C"의 순서가 랜덤으로 찍힘.
콜백 함수
- 콜백 함수를
printString의 인자로 넣어줌 => 콜백함수의 실행 시점을printString이 정할 수 있음
Promise
- 자바스크립트 비동기 처리에 사용되는 객체
promise 객체 만드는 문법
let promise = new Promise(function(resolve, reject) { ~~~ });promise의 실행 함수(excutour)
new Promise에 전달되는 함수. (function(resolve, reject) {~~~})- 실행함수의 인자인
resolve와reject는 자바스크립트에서 자체 제공하는 콜백 함수. 실행 함수에서 둘 중 하나를 반드시 호출해야 한다.
1. resolve와 reject : 실행함수의 파라미터
- Promise의 실행 함수(excutor)가 가지고 있는 두 개의 파라미터
- resolve : 기능을 정상적으로 수행해서 최종 데이터를 문제 없이 전달하는 콜백함수
- reject : 기능 수행 중 문제가 생기면 호출하는 콜백함수.
- resolve와 reject는 함수다!
resolve와 reject의 전달인자
- resolve의 인자가 then의 파라미터에 인자로 전달된다.
(then의 콜백함수의 리턴값이 다음 then의 인자로 전달된다) - reject의 인자(에러)가 catch의 파라미터에 인자로 전달된다.
2. then과 catch : Promise 객체의 메서드
- then : resolve의 인자(데이터)를 인자로 받아와서 처리
- catch : reject의 인자(에러)를 인자로 받아와서 처리
then()
-
프로미스 객체를 리턴
🌟 then의 콜백함수의 리턴값이 프로미스 객체일 경우 👉🏽 then의 리턴값 그 자체가 된다.
🌟 then의 콜백함수의 리턴값이 어떠한 값일 경우 👉🏽 then이 리턴하는 프로미스 객체의 PromiseResult 값이 된다. -
then의 콜백함수의 인자는 앞에서 넘어온 프로미스 객체의 PromiseResult 값이다.
catch()
- 프로미스 객체를 리턴
3. Promise의 세 가지 상태
- 대기(pending): 비동기 처리의 결과를 기다리는 중
- 이행(fulfilled): 비동기 처리가 정상적으로 끝났고 결과값을 가지고 있음
- 거부(rejected): 비동기 처리가 비정상적으로 끝났음
*printString은 Promise를 리턴 (=printString은 프로미스화 된 함수)
- Promise는 나름의 콜백함수를 인자로 가짐
4. Promise Hell
- 프로미스도 프로미스 헬 가능성이 있다..
5. Promise Chaining
- Promise Hell을 방지하기 위해 return 으로 한번씩 끊어줄 것.
6. Promise.all()
- Promise.all() 의 전달인자 : 프로미스 객체로 이루어진 배열의 형태
- Promise.all() 을 사용한 경우, then 메서드의 매개변수 : 배열의 형태 (각 요소는 각 프로미스 객체의 데이터가 string화된 것)
- Promise.all 에 두 개의 Promise 요청이 전달되고, 만일 그중 하나가 rejected 상태가 되는 경우: 모든 Promise 요청이 거부되면서 catch 메서드를 따라간다.
async/await
- Promise의 syntactic sugar (Promise인데 실제로 보이는 모습이 좀 다른 것..)
async키워드를 쓴 함수는 항상 프라미스를 리턴한다. (프라미스가 아닌 값을 리턴하더라도 이행 상태의 프라미스로 값을 감싸서 '이행된 프라미스'가 리턴되도록 한다.)
await키워드로 비동기 함수들을 마치 동기적인 것처럼 쓸 수 있다.await키워드를 쓴 함수의 리턴값 : fullfilled 혹은 rejected된 값. (👉🏽 값을 밖으로 뺄 수 있다! but 남발하면 안됨. await 키워드 쓴 함수들끼리는 다시 동기적 작업...)
