[7/16] Promise

- 작업이 나중에 완료되면 알려주는 비동기 작업 결과를 다루는 객체

상태

- Pending : 대기 중 (작업이 아직 안 끝남)

- fulfilled : 성공 (작업 완료, 결과 있음)

- rejected : 실패 (에러 발생)

기본 사용법

const promise = new Promise((resolve, reject) => {
	const success = true;
 
	if (success) {
    	resolve("success");
    } else {
    	reject("failed");
    }
});

promise
	.then(result => console.log(result)) // 성공 시
    .catch(error => console.error(error)); // 실패 시

비동기 예시 (setTimeout)

const delay = ms => {
	return new Promise(resolve => {
    	setTimeout(() => {
        	resolve(`${ms}ms 후 완료`);
        }, ms);
    });
};

delay(1000).then(msg => console.log(msg));

Promise chaining

delay(1000)
	.then(msg => {
    	console.log(msg);
        return delay(500);
    })
    .then(msg => {
    	console.log(msg);
        return delay(200);
    })
    .then(msg => console.log(msg));

10000ms 후 완료 -> 500ms 후 완료 -> 200ms 후 완료

에러 처리 .catch()

const risky = () => {
	return new Promise((resolve, reject) => {
    	const ok = false;
        
        if (ok) resolve("success");
        else reject("failed");
    });
};

risky()
	.then(res => console.log(res))
    .catch(err => console.error(err));

async/await (Promise 더 간단하게 쓰기)

const getData = () => {
	return new Promise(resolve => {
    	setTimeout(() => resolve("데이터 도착"), 1000);
    });
};

async function showData() {
	console.log("데이터 요청");
    const result = await getData();
    console.log(result);
}

showData();

데이터 요청 -> 데이터 도착

- await는 Promise가 끝날 때까지 기다렸다가 결과를 반환 

Promise.all : 모든 작업이 끝나야 완료

Promise.all([
	delay(1000),
    delay(2000),
    delay(3000)
]).then(results => {
	console.log('모두 완료', results);
});

Promise.race : 가장 빨리 끝나는 하나만 받음

Promise.race([
	delay(1000),
    delay(2000),
    dealy(3000)
]).then(result => {
	console.log("가장 빠른 결과:", result);
});

API 요청

function fetchUser(useId) {
	return fetch(url)
    	.then(response => {
        	if(!response.ok) throw new Error("error");
            return response.json();
        });
}

fetchUser(1)
	.then(user => console.log(user))
    .catch(error => console.error(error));

fetch

- 브라우저에서 제공하는 API

- HTTP 요청을 보내서 서버로부터 데이터를 가져오는 함수

fetch(url)

- fetch()는 비동기 함수이며, 자동으로 Promise를 반환함

- .then() 또는 await로 처리 가능