Javascript - promise

Jinsung·2021년 10월 4일

javascript

목록 보기

10/11

1. 👀Javascript 동작

Javascript 는 싱글 쓰레드로 동작하는 언어입니다.(메인 쓰레드 하나와 그리고 콜스택 하나로 구성되어 있습니다.)
실행환경(런타임)의 도움을 받아 동시 실행합니다.
(WebAPI(dom, ajax, setTimeout..)Task Queue, Event Loop 등과 함께 동작합니다.

2. 콜백이란

콜백 은 자바스크립트가 비동기 처리를 위한 패턴중 한 가지로 전통적인 콜백 패턴으로 비동기들을 계속 처리한다면 일명 콜백 헬을 마주칠 수 있습니다. 코드의 가독성도 떨어질 뿐더러 엄청난 중첩 문제가 생기기 쉽습니다.

3. Promise

비동기 연산이 종료된 후 결과를 알기 위해 사용하는 개체입니다. 프로미스를 사용하면 비동기 메서드를 마치 동기 메서드처럼 값을 반환할 수 있습니다. 콜백 헬 때문에 ES6에서 도입한 또다른 비동기 처리 패턴입니다.

1) promise 생성

프로미스는 promise 생성자 함수를 통해 생성합니다.

비동기 작업을 수행할 콜백 함수를 인자로 전달받아 사용합니다.

// 프라미스 객체를 만듭니다. 
// 인자로는 (resolve, reject) => {} 이런 excutor 실행자(혹은 실행 함수라고 불러요.)를 받아요.
// 이 실행자는 비동기 작업이 끝나면 바로 두 가지 콜백 중 하나를 실행합니다.
const promise = new Promise((resolve, reject) => {
	if(...){
		...
       // resolve: 작업이 성공한 경우 호출할 콜백
	resolve("성공!"); 
  
	}else{
		...
   	// reject: 작업이 실패한 경우 호출할 콜백
	reject("실패!"); 
	}
});

2) promise 상태값

pendding : 비동기 처리 수행전 (resolve, reject가 아직 호출되지 않음)

fulfilled : 수행 성공 (reslove가 호출된 상태)

rejected : 수행 실패(reject가 호출된 상태)

settled: 성공 or 실패 (resolve나 reject가 호출된 상태)

3) promise 후속 처리 메서드

프로미스로 구현된 비동기 함수는 프로미스 객체를 반환합니다.

프로비스로 구현된 비동기 함수를 호출하는 측에서 이 프로미스 객체의 후속 처리 메서드를 통해 비동기 처리 결과(성공, 실패)를 바당서 처리해야 합니다.

.then(성공 or 실패)

then의 첫 인자는 성공 시 실행, 두번째 인자는 실패 시 실행

// 프라미스 생성
let promise = new Promise((resolve, reject) => {
	setTimeout(() => resolve("완료"), 1000);
});
let promise2 = new Promise((resolve, reject) => {
	setTimeout(() => reject(new Error("오류")), 1000);
});

// resolve
promise.then(result => {
	console.log(result); // 완료가 콘솔에 찍힘
}, error => {
	console.log(error); // 실행되지 않음
});

// reject
promise2.then(result => {
	console.log(result); // 실행되지 않습니다.
}, error => {
	console.log(error); // Error: 오류가 찍힘
});
// catch
promise2.catch((error) => console.log(error));

4) promise chaining(프로미스 체이닝)

프로미스는 후속처리 메서드를 체이닝해서 여러개의 프로미스를 연결할 수 있습니다. (이 방법으로 콜백 헬을 해결)

new Promise((resolve, reject) => {
	setTimeout(() => resolve("promise 1"), 1000);
}).then((result) => { // 후속 처리 메서드 하나를 쓰고,
	console.log(result); // promise 1
	return "promise 2";
}).then((result) => { // 이렇게 연달아 then을 써서 이어주는 거예요.
	console.log(result);
	return "promise 3";
}).then(...);

4. async, await

1) async

함수 앞에 async를 붙여 사용

항상 프로미스를 반환합니다 (프로미스 값이 아니라도, 프로미스로 감싸서 반환해줘야 합니다.)

// async는 function 앞에 써줍니다.
async function myFunc() {
	return "프라미스를 반환"; 
}

myFunc().then(result => {console.log(result)}); // 콘솔로 확인

2) await

async의 짝꿍으로 async없이 사용할 수 없습니다.

await 프로미스가 처리될 때까지 기다려싸다가 이후 결과를 반환

async function myFunc(){
	let promise = new Promise((resolve, reject) => {
		setTimeout(() => resolve("완료"), 1000);
	});

    console.log(promise);

let result = await promise; // 여기서 기다리자 하고 신호를 줍니다.

 console.log(promise);

 console.log(result); // then(후처리 함수)를 쓰지 않았는데도, 
//  1초 후에 콘솔에 찍힙니다.
}