프로미스
프로미스란?
프로미스는 비동기 작업의 결과를 나타내는 객체입니다. 비동기 작업은 주로 네트워크 요청이나 파일 읽기와 같이 시간이 걸리는 작업을 의미합니다. 프로미스는 콜백 함수를 대체하고 비동기 코드를 더 효과적으로 다룰 수 있게 해줍니다.
1. 프로미스의 상태(State)
프로미스는 세 가지 상태를 가지며, 이에 따라 처리 과정이 진행됩니다.
- 대기(Pending): 초기 상태, 작업이 완료되거나 실패할 때까지 대기합니다.
- 이행(Fulfilled): 작업이 성공적으로 완료되었을 때의 상태입니다.
- 거부(Rejected): 작업이 실패했을 때의 상태입니다.
2. 프로미스의 생성
프로미스는 Promise 생성자 함수를 사용하여 생성합니다. 생성자 함수는 하나의 함수를 인수로 받으며, 이 함수는 두 개의 콜백 함수(resolve, reject)를 인수로 받습니다.
const myPromise = new Promise((resolve, reject) => {
// 비동기 작업 수행
if (작업이 성공) {
resolve(결과);
} else {
reject(에러);
}
});3. 프로미스의 체이닝 (Chaining)
프로미스는 연속적인 비동기 작업을 간단하게 표현할 수 있는 체이닝을 지원합니다. 각각의 프로미스가 이행되면 다음 프로미스가 차례대로 실행됩니다.
myPromise
.then(result => {
// 첫 번째 프로미스가 이행된 경우
return 다음작업(result);
})
.then(result => {
// 두 번째 프로미스가 이행된 경우
return 더다음작업(result);
})
.catch(error => {
// 어느 시점에서라도 거부된 경우
console.error(error);
});4. 프로미스의 에러 처리
프로미스 체이닝 중 발생한 에러는 .catch() 메서드를 사용하여 처리할 수 있습니다.
myPromise
.then(result => {
// 비동기 작업 수행
})
.catch(error => {
console.error(error); // 에러 처리
});5. Promise.all과 Promise.race
Promise.all은 여러 개의 프로미스가 모두 이행될 때까지 기다리는 프로미스를 반환합니다. Promise.race는 여러 개의 프로미스 중 가장 먼저 이행된 프로미스만을 반환합니다.
const promise1 = 비동기작업1();
const promise2 = 비동기작업2();
Promise.all([promise1, promise2])
.then(results => {
// 모든 작업이 이행된 경우
})
.catch(error => {
// 하나라도 작업이 거부된 경우
});
Promise.race([promise1, promise2])
.then(result => {
// 가장 먼저 이행된 작업의 결과를 처리
});💡 프로미스를 사용하면 비동기 코드를 더 간결하게 작성할 수 있으며, 에러 처리 및 여러 비동기 작업의 조합도 용이해집니다.
async / await
async/await란?
async와 await은 JavaScript에서 비동기 코드를 작성하는 데 사용되는 문법적 요소입니다. 이를 사용하면 프로미스를 보다 간결하게 작성할 수 있습니다.
1. async 함수
async 키워드를 함수 앞에 붙이면 해당 함수는 항상 프로미스를 반환합니다. 내부에서 await 키워드를 사용하여 비동기 작업의 완료를 기다릴 수 있습니다.
async function myAsyncFunction() {
// 비동기 작업 수행
return 결과; // 프로미스가 아닌 값도 반환 가능
}2. await 표현식
await은 async 함수 내에서만 사용 가능하며, 프로미스가 처리될 때까지 기다린 후 결과를 반환합니다. 이를 통해 비동기 코드를 동기적으로 작성할 수 있습니다.
async function example() {
const result = await myAsyncFunction();
console.log(result);
}3. async/await의 에러 처리
try...catch 블록을 사용하여 async 함수 내에서 발생한 에러를 처리할 수 있습니다.
async function example() {
try {
const result = await myAsyncFunction();
console.log(result);
} catch (error) {
console.error(error);
}
}4. 여러 비동기 작업의 병렬 처리
Promise.all을 활용하여 여러 개의 비동기 작업을 병렬로 처리할 수 있습니다.
async function parallelExample() {
const [result1, result2] = await Promise.all([asyncTask1(), asyncTask2()]);
console.log(result1, result2);
}5. async/await와 프로미스 체이닝
async/await은 프로미스 체이닝을 대체할 수 있습니다. async 함수 내에서 await을 사용하면, 그 이후의 코드는 마치 동기 코드처럼 작성할 수 있습니다.
async function sequentialExample() {
const result1 = await asyncTask1();
const result2 = await asyncTask2();
console.log(result1, result2);
}Fetch
Fetch란?
fetch는 JavaScript에서 제공하는 네트워크 요청을 간편하게 수행할 수 있는 API입니다. 주로 웹에서 서버로 데이터를 비동기적으로 요청하고 응답을 처리할 때 사용됩니다.
1. 기본적인 사용법
fetch('https://api.example.com/data')
.then(response => {
// 응답 객체를 받아 처리
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json(); // JSON 형태의 응답을 파싱
})
.then(data => {
// 파싱된 데이터를 활용
console.log(data);
})
.catch(error => {
// 네트워크 오류 또는 파싱 오류 등을 처리
console.error('There was a problem with the fetch operation:', error);
});2. Fetch 메서드의 주요 특징:
-
Promise 기반:
fetch는 프로미스를 반환하므로.then()과.catch()을 통해 비동기적으로 응답을 처리합니다. -
HTTP 응답 처리: 응답 객체를 받아 상태 코드를 확인하고,
response.ok를 통해 성공 여부를 판단할 수 있습니다. -
JSON 파싱:
response.json()메서드를 사용하여 JSON 형태의 응답을 자바스크립트 객체로 파싱합니다. -
기본적으로 CORS를 지원: Same-Origin Policy 제약을 우회하기 위해 Cross-Origin Resource Sharing (CORS)를 사용할 수 있습니다.
3. Request 및 Response
fetch는 Request 객체를 사용하여 요청을 생성하고, Response 객체를 사용하여 서버로부터의 응답을 처리합니다.
const myRequest = new Request('https://api.example.com/data', {
method: 'GET',
headers: new Headers({
'Content-Type': 'application/json'
// 추가적인 헤더 등 설정 가능
}),
// 기타 옵션들
});
fetch(myRequest)
.then(response => {
// 응답 처리
});Request 객체를 생성할 때 HTTP 메서드, 헤더, 바디 등을 설정할 수 있습니다.
4. async/await와 Fetch
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error('Network response was not ok');
}
const data = await response.json();
console.log(data);
} catch (error) {
console.error('There was a problem with the fetch operation:', error);
}
}
fetchData();💡 async/await 를 사용하면 비동기 코드를 보다 간결하게 작성할 수 있고, try...catch 블록을 통해 에러 처리가 용이해집니다.
💡 async/await 는 비동기 코드를 작성할 때 가독성을 높이고 에러 처리를 편리하게 할 수 있도록 도와줍니다.
