[javascript] 자바스크립트의 비동기 제어와 Fetch API 활용 방법
자바스크립트에서 비동기적인 작업을 처리하는 것은 매우 중요합니다. 이러한 작업은 네트워크 요청과 데이터베이스 쿼리 등의 IO 작업에 유용합니다. 대표적인 비동기 제어 방법 중 하나는 Promise입니다. Promise는 비동기 작업이 끝날 때까지 기다리는 객체로, 성공 또는 실패와 같은 결과를 처리할 수 있습니다.
Fetch API를 사용한 데이터 요청
Fetch API는 네트워크 요청을 간편하게 처리할 수 있는 방법입니다. 다음은 Fetch API를 사용하여 데이터를 가져올 때의 간단한 예제입니다.
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error fetching data:', error);
});
위 예제에서는 fetch 함수를 사용하여 서버에서 데이터를 요청합니다. 이후 then 메서드를 사용하여 응답을 처리하고, 최종적으로 catch 메서드를 사용하여 오류를 처리합니다.
Async/Await를 이용한 비동기 제어
ES2017부터 도입된 async/await는 Promise를 더 편리하게 다룰 수 있게 해줍니다. 이 두 키워드를 사용하면 비동기 코드를 동기식으로 작성할 수 있어 가독성이 좋아집니다.
다음은 async/await를 사용한 Fetch API 예제입니다.
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('Error fetching data:', error);
}
}
위 코드에서는 async 키워드로 정의된 fetchData 함수 안에서 await를 사용하여 Fetch API를 이용해 데이터를 가져오고 처리합니다.
비동기 작업을 처리할 때에는 Fetch API와 Promise, 그리고 async/await를 사용하여 가독성 좋고 유지보수가 용이한 코드를 작성할 수 있습니다.