자바스크립트 비동기처리?
특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성
#비동기 처리 예시1
제이쿼리의 ajax
제이쿼리로 웹 서비스를 개발할 때 ajax 통신을 빼놓을 수 없음.
function getData() {
let tableData;
$.get('https://velog.io/rkhong, function(response){
tableData = response;
});
return tableData;
}
console.log(getData());- "$.get()" -> ajax 통신하는 부분.
-"https://velog.io/rkhong" 에 HTTP GET 요청을 보내 한 번 상품(product) 정보를 요청하는 코드
-서버에서 받아온 데이터는 "response" 인자에 담김 -> "tableData" 변수에 저장 ("tableData = response;") => undefined- "$.get()"로 데이터를 요청하고 받아올 때까지 기다리지 않고 바로 다음 코드인 "return tableData;"를 실행시켰기 때문임.
#비동기 처리 예시2
setTimeout() - Web API
//#1
console.log('hey');
//#2
setTimeout(function() {
console.log('hey hey');
}, 3000);
//#3
console.log('hey hey hey');- 출력 결과
1. 'hey' 출력
2. 'hey hey hey' 출력
3. 3초 있다가 'hey hey' 출력
=> setTimeout()의 3초를 기다렸다가 다음 코드 실행이 아닌, 바로 다음 코드 실행함.
비동기 처리 방식의 문제점 해결 - 콜백 함수
콜백 지옥 (Callback hell)
비동기 처리 로직을 위해서 콜백 함수를 연속해서 사용할 때 발생하는 문제
a(function (response)) {
b(resopnse, function(id) {
c(id, function(result) {
d(result, function(text) {
console.log(text);
});
});
});
});=> 문제점 : 가독성이 떨어지고 로직 변경이 어렵다
콜백 지옥 해결 방법
대표적 방법에는 Promise / Async
코딩 패턴만으로 해결하기
function ParseValueDone(id) {
auth(id, authDone);
}
function authDone(result) {
display(result, displayDone);
}
function displayDone(text) {
console.log(text);
}
a(function(response) {
parseValue(response, parseValueDone);
}Reference
