JS 비동기 함수, promise

비동기 함수

• 함수 내부에 비동기로 동작하는 코드를 포함한 함수
• 비동기 함수는 내부의 비동기 코드가 끝나지 않더라도 즉시 종료된다.
• 비동기 함수는 비동기 처리 결과를 외부에 반환할 수 없고, 상위 스코프에 전달할 수 없기 때문에 비동기 함수 내에서 결과를 처리한다. 이 과정에서 콜백 헬이 발생할 수 있다

//비동기 함수 setTimeout
//호출과 동시에 종료되기 때문에 상위 스코프에 기대한 대로 값을 할당하지 못한다
let number = 1;

setTimeout(() => number = 2, 1000);
console.log(number);  //1

Promise 객체를 통한 콜백 헬 해결

• 비동기 처리 상태와 처리 결과를 관리하는 객체
• Promise 생성자는 'resolve', 'reject'함수를 인자로 갖는 콜백 함수를 인자로 갖는다. 비동기 처리가 성공하면 resolve함수를 , 실패하면 reject함수를 호출한다.
• Promise는 세 가지 상태를 갖는다.
  • pending : 비동기 처리가 수행되지 않은 상태
  • fulfilled : resolve함수가 호출된 상태. 비동기 처리 성공
  • rejected : reject함수가 호출된 상태. 비동기 처리 실패

//Promise의 후속 처리 메소드 then
//첫 번째 콜백 함수는 fulfilled상태가 되면 호출되고, 비동기 처리 결과를 인수로 받는다
//두 번째 콜백 함수는 rejected상태가 되면 호출되고, 프로미스의 에러를 인수로 받는다

//then은 항상 Promise 객체를 반환한다.
//then의 콜백 함수가 Promise를 반환하면 그 Promise 객체를 반환
//Promise가 아닌 값을 반환하면 그 값을 value로 한 Promise객체를 반환한다.

let promiseFul = new Promise(resolve => resolve("비동기 처리 성공"))
.then((res) => console.log(res), (res) => console.error(res));  //비동기 처리 성공

let promiseRej = new Promise((_, reject) => reject(new Error("비동기 처리 실패")))
.then((res) => console.log(res), (res) => console.error(res));  //Error: 비동기 처리 실패

출처
이웅모, 모던 자바스크립트 Deep Dive(2021)