아니 이거 콜백 지옥이 문제가 아니라,
비동기 -> 콜백 -> promise -> asyncawait 지옥에 내가 빠진 느낌
해방되고 싶어
해방일지는 내가 쓰고 싶다
개먼사님 요약본 -> 판교어쩌고 하는 분의 시리즈 -> Nolan 아저씨(아닐수도 있음) 글 -> 생활코딩 2바퀴
순으로 이해하고자 하였으나,
언젠간 이해 되겠지 언젠간.....흫
call back(== 인자로 받아들인 함수를 다시 호출)
외부에서 처리해야 하는 함수(side effect) 먼저 처리 하고, 이후에 수행될 수 있게 약속(보장)되어 있는 함수
콜백함수로 비동기 처리 방식의 문제를 해결
promise
비동기지만 동기로 동작하는 것처럼 보이는
-> call back hell
.then(){
어떤 함수
}
then 뒤에 오는 어떤 함수
는 별도의 Q에서,,,
우선순위로 처리되고 이후에 콜백함수 처리됨
async await
asyncronous한 single threaded event loop(할 일을 계속 찾음)을 구현하기 위해 만들어낸 문법적 방식
function getData() {
var tableData;
$.get('https://domin.com/products/1', function(response) {
tableData = response;
});
return tableData;
}
console.log(getData()); //undefined
$.get()
이 ajax 통신을 하는 부분
서버에서 받아온 데이터가 response
인자에 담김
결과는 undefined
비동기
데이터를 요청하고 받아올 때까지 기다리지 않고,
다음 코드인 return tableData;
실행
특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것
-> 콜백함수로 비동기 처리 방식의 문제를 해결
-> js 비동기 처리 코드는 콜백을 사용해야 코드의 실행 순서를 보장 받을 수 있다
function getData(callbackFunc){
$.get('https://domain.com/products/1', function(response){
callbackFunc(response); //서버에서 받은 데이터 response를 callbackFunc() 함수에 넘겨줌
});
}
getData(function(tableData){
console.log(tableData); //$.get()의 response 값이 table Data에 전달 됨
});
콜백지옥 해결하기
Promise
A promise is an object that may produce a single value some time in the future
function getData(callback) {
return new Promise(function(resolve, reject) { // Pending(대기)
$.get('url 주소/products/1', function(response) {
// 데이터를 받으면 resolve()호출
resolve(response); // Fulfilled(이행/완료)
//reject(new Error("Request is failed")); // Rejected(실패)
});
});
}
// getData()의 실행이 끝나면 호출되는 then()
getData().then(function(tableData) {
// resolve()의 결과 값이 여기로 전달됨
console.log(tableData); // $.get()의 response 값이 tableData에 전달됨
});
Promise Chaining
.then()
으로 연결하여 처리async await
async function 함수명() {
await 비동기_처리_메서드_명();
}
async
라는 예약어를 붙인다await
await
의 대상이 되는 비동기 처리 코드 : 프로미스를 반환하는 API 호출 함수예제
function fetchUser() {
var url = "https://user 1번 불러와"
return fetch(url).then(function(response) {
return response.json();
});
}
function fetchTodo() {
var url = "https:// 투두 가져와"
return fetch(url).then(function(response) {
return response.json();
});
}
//사용자 정보와 할 일 정보가 담긴 프로미스 객체 반환
async function logTodoTitle() {
var user = await fetchUser();
if (user.id === 1) {
var todo = await fetchTodo();
console.log(todo.title);
}
}
//error 처리
async function logTodoTitle() {
try {
var user = await fetchUser();
if (user.id === 1) {
var todo = await fetchTodo();
console.log(todo.title);
}
} catch (error) {
console.log(error);
}
}
어씽크어웨잍까지 다 왔다가 또 갑자기
콜백...? 콜백???
갑자기 또 콜백이 뭔지 모르겠어
(출처는 생활코딩)
val는 지금 바로 실행되지는 않지만, 다른 함수의 입력값으로 전달되서 다른 함수에 의해서 나중에 호출됨
fetch('https://아무거나')
.then(function(response){
// response.json().then(function(data){ // Nested promise
// console.log('data', data);
// });
return response.json();
})
.catch(function(reason){
console.log('reason', reason);
})
.then(function(data){
console.log('data', data); // promise chaining, or async await을 하면 chaining 안함
})
;
// response.json()이 리턴하는 값도 Promise -> then과 catch 쓸 수 있음
fetched.then(function(result){});
fetch를 통해 실행한 결과가 성공했을 때 .then()
으로 전달된 콜백함수가 호출 되도록 약속 되어 있음response.json()
-> promise.then()
을 호출한다fetched.catch(function(reason){});
promise를 리턴하는 함수가 실행됐을 때 실패 했다면 catch 안으로 전달된 콜백 함수가 호출됨reason
파라미터에 실패한 이유가 전달 됨비동기적인 작업을 처리할 때 그 작업이 성공했는지 실패했는지를 표준화된 방식을 이용해서 처리할 수 있도록 함
성공했을 때는 .then()
으로 전달된 함수, 실패했을 때는 .catch(err)
로 전달된 함수가 실행 될 것이다
이 아저씨 이렇게 설명 해놓고 맘에 안든데,,,