강의를 통한 Promise 복습
일을 처리하는 순서에 있어 이전 순서의 응답을 받고 가는것과 우선 요청부터 보내고 응답을 보내느 것의 차이
일의 순서가 중요한 경우에 많이 사용하는 방법으로 요청이 와야지만 다음 작업을 진행 할 수 있을때 주로 사용된다.
순서는 보장이 확실히 되지만 응답을 기다리는 동안 다음 작업 수행이 안되기 때문에 비효율적일 수 있다.
일의 순서보단 효율이 우선인 경우 요청을 보내고도 다음 작업으로 이어 갈 수 있다.
효율적이지만 순서를 보장 할 수 없다.
JS에서 비동기 작업 완료와 실패를 처리할때 사용되는 개념.
비동기 작업이 끝난 후에 실행되는 콜백을 지원하고 생성자를 통해 사용이 가능하다.
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
성공 (resolve)의 경우 .then으로 작업을 이어나갈 수 있고, 실패 (reject)의 경우 .catch로 오류를 잡을 수 있다.
JS에서 fetch를 통한 작업도 Promise를 반환하기 때문에 아래처럼 사용할 수 있다.
fetch("https://jsonplaceholder.typicode.com/posts/1")
.then((response) => response.json())
.then((json) => setPost(json))
.catch((error) => console.error("데이터 펫칭 오류! => ", error));
비동기 작업의 병렬처리 (Parallel Processing)이 필요한 경우 Promise.all
을 사용해서 여러 비동기 작업의 응답을 한 번에 받아서 처리할 수 있다.
// 2개 이상의 Promise 처리하기
Promise.all([
fetch("https://jsonplaceholder.typicode.com/posts").then((response) => response.json()),
fetch("https://jsonplaceholder.typicode.com/users").then((response) => response.json()),
])
.then(([posts, users]) => {
setData({ posts, users });
})
.catch((error) => console.error("데이터 펫칭 오류! => ", error));
Promise 문법의 가독성을 높이는 async/await 개념을 사용하여 promise 객체를 보다 쉽게 다룰 수 있다.
async
로 정의된 함수는 Promise를 반환한다await
는 Promise가 이행될때까지 기다려 결과를 반환한다 (async
함수 내에서만 사용한다)async function fetchData(url) {
try {
const res = await fetch(url);
// 나머지 코드 ...
} catch (error) {
// error 처리
}
}