비동기 함수
JavaScript에서 특정 작업을 "동시에" 처리할 수 있도록 해주는 함수
- 네트워크 요청, 파일 처리, 타이머 설정, 이벤트 처리시 일반적으로 사용됨
- 동기 함수와는 달리, 함수가 호출되면 작업을 "백그라운드"에서 처리하고 함수가
완료될 때까지 기다리지 않는다. 대신, 작업이 완료되면
"콜백 함수", 'Promise', 'async/await'을 통해 결과를 반환하거나 처리한다. - 콜백 함수 : 비동기 작업이 완료되면 호출되는 함수. 결과나 에러를 처리한다
- Promise : 비동기 작업을 캡슐화하여 처리할 수 있는 객체. 성공 또는 실패시의 상태를 나타냄
- async / await : 비동기 함수를 보다 간결하고 동기적인 코드와 유사하게 작성할 수 있는 구문.
ES8에서 추가되었다
await fetch
JavaScript에서 네트워크 요청을 보내고 응답을 받기 위해 사용되는 비동기 함수.
- 'fetch' 함수는 웹 API의 일부로, 네트워크를 통해 리소스를 가져오기 위해 사용된다
- Promise를 반환하며, 이 Promise는 웹 리소스의 'Response' 객체를 나타낸다
(요청에 대한 응답. HTTP 응답 상태, 헤더 및 본문(body) 데이터를 포함함) - 'await fetch'를 사용하는 것은 해당 네트워크 요청이 완료될 때까지 기다리고, 응답이 완료된 후에 다음 코드로 진행하는 것을 의미함
- 'await'는 비동기 함수 내에서만 사용할 수 있으며, 해당 함수가 완료될 때까지 실행을 일시 중지한다
async
JavaScript에서 비동기 함수를 선언할 때 사용되는 키워드
- 비동기 함수 : 네트워크 요청, 파일 읽기/쓰기, 타이머 설정 등과 같이 시간이 걸리는 작업을 수행할 때 유용함
- 'async' 함수는 함수 선언 앞에 붙여 사용함
async function myAsyncFunction() {
// 비동기 작업 수행
return someValue; // 비동기 작업의 결과를 반환할 수 있음
}
- 'async' 함수는 항상 Promise를 반환한다. 함수 내에서 return을 사용하여 값을 반환하면,
해당 값은 Promise.resolve로 감싸져서 반환된다. 이 값은 'then' 메서드나 'await' 키워드를 사용하여 접근할 수 있다
async function fetchData() {
return 'Hello, async!';
}
fetchData().then(data => {
console.log(data); // 'Hello, async!' 출력
});
- async 함수 내에서 'await' 키워드를 사용하여 Promise가 처리될 때까지 기다릴 수 있다
- 해당 비동기 작업이 완료될 때까지 함수의 실행을 일시 정지하며, 그 후에 데이터를 가져와서 반환한다
async function fetchData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}
fetchData().then(data => {
console.log(data); // 받아온 JSON 데이터를 출력
}).catch(error => {
console.error('Error fetching data:', error);
});
fetch
웹 브라우저에서 제공하는 내장 API
- 네트워크를 통해 리소스를 가져오기 위한 메커니즘
- HTTP 요청을 보내고, 서버로부터 데이터를 받아오는 데 사용한다
- 'fetch' API는 JavaScript의 표준 메서드로, Promise를 반환하여 비동기적으로 데이터를 처리할 수 있다
- GET, POST, PUT, DELETE 등 다양한 HTTP 메서드를 사용하여 요청을 보낼 수 있다. 기본적으로 GET 메서드를 사용하며, 다른 메서드를 사용하려면 옵션을 설정해야됨
// GET 요청 예제
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('Error fetching data:', error);
});
// POST 요청 예제
fetch('https://api.example.com/post', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ key: 'value' }),
})
.then(response => response.json())
.then(data => {
console.log('Success:', data);
})
.catch(error => {
console.error('Error:', error);
});
axios
JavaScript와 Node.js를 위한 Promise 기반 HTTP 클라이언트 라이브러리
- 웹 어플리케이션에서 서버와 데이터를 주고받기위해 사용됨
- axios는 브라우저 환경과 Node.js 서버 측에서도 사용할 수 있다
- 다양한 HTTP 요청 메서드 (GET, POST, PUT, DELETE) 를 지원하며, 요청 헤더 설정, 요청 데이터 전송, 응답 데이터 접근 등을 간편하게 처리할 수 있는 API를 제공한다
- 요청과 응답에 대한 인터셉터를 설정할 수 있는 기능을 제공한다. 요청 전후의 로직을 추가하거나 응답을 변형할 수 있다
// axios를 이용한 GET 요청 예제
axios.get('https://api.example.com/data')
.then(response => {
console.log(response.data); // 서버에서 받아온 데이터 출력
})
.catch(error => {
console.error('Error fetching data:', error);
});
// axios를 이용한 POST 요청 예제
axios.post('https://api.example.com/post', { data: 'example' })
.then(response => {
console.log(response.data); // 서버에서 받아온 응답 데이터 출력
})
.catch(error => {
console.error('Error posting data:', error);
});
- 'axios.get()'은 GET 요청을, 'axios.post()'는 POST 요청을 보내고, Promise를 반환하여 요청이 성공하면 '.then' 블록에서 응답을 처리하고, 요청이 실패하면 '.catch()' 블록에서 오류를 처리한다
- 'axios'를 사용할 때 주의할 점 : axios가 기본적으로 JSON 형식의 요청을 처리하기 때문에 POST 요청시 데이터를 JSON.stringify()로 직렬화할 필요가 없음
