1. 비동기 / 동기 방식
1) 비동기
- 여러 요청들을 동시에 실행
- 요청들이 서로 기다릴 필요가 없는 경우, 독립적인 내용들에 대해 조회하는 경우
- 일반적으로 외부에서 요청하는 라이브러리(axios)들은 비동기 방식
- ex) 한 화면에서 각자 다른 정보를 불러올 때(네이버 홈 화면 - 검색어, 뉴스 등등)
2) 동기
- **하나의 요청이 완료된 후에 다음 요청을 실행
javascript는 기본적으로 동기 방식- ex) 게시글 등록을 완료 한 후 글 불러오기
만약 한 화면에서 뉴스 카테고리 칸이 동기화된 후 검색어, 쇼핑 순으로 동기화가 된다면 한 화면이 완전히 실행되는데 너무 많은 시간이 소비된다.
또한 게시글이 등록되기도 전에 글을 불러오는 요청이 실행된다면 내용이 없다는 현상이 발생한다!!!
==> 따라서, 비동기/동기 방식을 상황에 적절하게 사용해야한다❗❗❗
Callback
- 파라미터로 함수를 전달하는 함수
function add(callback) {
setTimeout(() => callback(1 + 2), 100)
// 100ms가 지난 후 함수로 입력받은 callback에 1 + 2값을 다시 입력하여 callback함수 호출
}
add(function (res) { // add가 입력받는 callback함수 정의 부분
console.log(res)
});- callback hell 발생 가능
Promise
- new promise(...)로 사용
const aaa = new Promise((resolve, reject) => {
resolve(response)
reject(error)
// 비동기 작업
});
aaa.then().catch((err) => {console.log(err)})- 콜백 함수는 호출할 때 바로 실행
- 내부에
resolve또는reject함수를 호출하는 구문이 있을 경우 둘 중 하나가 실행 resolve또는reject가 실행 전 까지then또는catch로 넘어가지 않음
=> 따라서 비동기 작업이 완료될 때 resolve,reject를 호출로 비동기 작업의 동기적 표현이 가능❗❗
Promise내의 함수내용이 보통resolve를 호출하면 비동기 작업이 성공 /reject를 호출한다면 비동기 작업이 실패했음을 의미Promise가 끝난 후의 동작은then/catch메소드로 설정가능Promise가 성공했을 경우에는then실패했을 경우에는catch
Callback과 Promise의 차이
callback을 사용하면 비동기 로직의 결과값을 처리하기 위해서는 callback안에서만 처리를 해야하고, 콜백 밖에서는 비동기에서 온 값을 알 수가 없음!
하지만 promise를 사용하면 비동기에에서 온 값이 promise 객체에 저장되기 때문에 코드 작성이 용이
==> Promise는 callback hell을 방지할 수 있음!!
비동기 방식를 동기 방식으로 바꿔주는 async/await
function 함수이름(){
const data = axios.get('https:localhost/board/1')
console.log(data) // Promise
}
async function 함수이름(){
const data = await axios.get('https:localhost/board/1') //실행이 완료될때 까지 다음 코드 실행안함
console.log(data) // {id :1 .....}
}
첫번째 코드는 비동기 방식이기 때문에 data값이 Promise(값에 대한 약속)로 출력된다.
async/await를 사용하면 동기 방식으로 바뀌기 때문에 data값을 알맞게 받을 수 있다!
- 함수 앞에 async를 표기하고, 함수 내부에서 비동기 작업이 필요한 위치마다 await를 표기하면
await뒤의 내용이Promise로 자동 전환되고 해당 내용을resolve한 이후에 다음이 진행 - await는 반드시 async가 사용된 함수에서만 사용할 수 있으며 await의 유무로 동기적 함수, 비동기적 함수로 구분됨!
- async단독 사용 시 비동기 방식
공부하며 작성하고 있는 블로그입니다.
잘못된 내용이 있을 수 있으며 혹시 있다면 댓글 달아주시면 감사하겠습니다 😊
