PDH 개발 공부
[JavaScript] 비동기 처리 2 본문
JavaScript의 비동기 처리
- 특정 코드의 연산이 끝날 때 까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트 특성
비동기 처리 사례 1
// 흔한 사례로는 제이쿼리의 ajax ,
// 제이쿼리로 실제 웹 서비스를 개발 할 때 ajax통신을 주로 한다
// 보통 화면에 표시할 이미지나 데이터를 서버에 불러 와야할 때
function getData(){
var tableData;
$.get('https://domain.com/products/1', function(response) {
tableData = response;
});
return tableData;
console.log(getData()); // undefined
}
$.get()
ajax 통신을 하는 부분https://domain.com/products/1
에 HTTP GET 요청을 날려 1번 상품 정보를 요청하는 코드- 서버에서 받아온 데이터는
reponse
인자에 담겨짐
왜 undefined 일까?
$.get
로 데이터를 요청하고 받아올 때 까지 기다려주지 않고 다음코드인return tableData
를 실행했기 때문- **getData() 의 결과 값은 초기 값을 설정하지 않는 tableData의 값 undefined를 출력
- 즉 **특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것이 비동기 처리
비동기 처리 사례 2 (CallBack 게시글에서 다뤘던 내용)
// #1
console.log('Hello');
// #2
setTimeout(function() {
console.log('Bye');
}, 3000);
// #3
console.log('Hello Again');
예상하는 결과 값
// Hello
// 3초 있다가 Bye
// Hello Again 출력
실제 결과 값
// Hello
// Hello Again 출력
// 3초 있다가 Bye
비동기 처리 사례 1를 해결 해보기
function getData(callbackFunc) {
$.get('https://domain.com/products/1', function(response) {
callbackFunc(response); // 서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
});
}
getData(function(tableData) {
console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});
- 특정 로직이 끝났을 때 원하는 동작이 실행이 가능
콜백 지옥
$.get('url', function(response) {
parseValue(response, function(id) {
auth(id, function(result) {
display(result, function(text) {
console.log(text);
});
});
});
});
- 모든 과정을 비동기로 처리 해야한다고 하면 위와 같이 콜백안에 콜백을 무는 형식으로 코딩 하게 된다.
- 이 코드는 가독성도 떨어지고 로직을 변경하기도 어렵다
콜백 지옥 해결법
function parseValueDone(id) {
auth(id, authDone);
}
function authDone(result) {
display(result, displayDone);
}
function displayDone(text) {
console.log(text);
}
$.get('url', function(response) {
parseValue(response, parseValueDone);
});
- 위와 같은 코딩 패턴으로도 콜백 지옥을 해결할 수 있지만 Promise나 Async를 이용하면 더 편하게 구현이 가능
'JavaScript' 카테고리의 다른 글
[JavaScript] Unit Test (0) | 2021.07.19 |
---|---|
[JavaScript] 비동기 처리 1 (CallBack 함수에 대해) (0) | 2021.07.12 |
[Node.js]Ejs (0) | 2021.07.08 |
[JavaScript] this (0) | 2021.07.08 |
Ajax (0) | 2021.07.08 |
Comments