[모르고리즘 6] 비동기 해방일지

LILO Ghim·2022년 4월 27일
0

아니 이거 콜백 지옥이 문제가 아니라,

비동기 -> 콜백 -> promise -> asyncawait 지옥에 내가 빠진 느낌


해방되고 싶어
해방일지는 내가 쓰고 싶다


개먼사님 요약본 -> 판교어쩌고 하는 분의 시리즈 -> Nolan 아저씨(아닐수도 있음) 글 -> 생활코딩 2바퀴
순으로 이해하고자 하였으나,

언젠간 이해 되겠지 언젠간.....흫

비동기 -> 콜백 -> 콜백지옥 -> promise -> asyncawait


비긴즈

  • 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

콜백지옥 해결하기

Promise
A promise is an object that may produce a single value some time in the future

  • 비동기 처리에 사용되는 객체
  • 비동기 처리? 특정 코드의 실행이 완료될 때 까지 기다리지 않고 다음 코드를 먼저 수행하는 JS의 특성
  • Promise는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용
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 & await
async function 함수명() {
  await 비동기_처리_메서드_명();
}
  • 함수의 앞에 async라는 예약어를 붙인다
  • 함수 내부 로직 중 HTTP 통신을 하는 비동기처리 코드 앞에 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 쓸 수 있음
  • fetch 함수는 Promise 데이터 타입을 return 함
  • Promise는 성공적으로 실행되면(resolved) Response object를 돌려줌
    -> 어떤 함수를 사용하는데 그 함수의 return 값이 Promise 라면, 그 함수는 비동기적으로 동작할 가능성이 큼
    -> 그 함수가 리턴한 값은 두 개의 함수를 사용할 수 있다. then() .catch() -> 콜백함수를 받는다
  • fetched.then(function(result){}); fetch를 통해 실행한 결과가 성공했을 때 .then()으로 전달된 콜백함수가 호출 되도록 약속 되어 있음
  • 콜백 함수가 호출 되면서 결과값이 있다면 첫번재 파라미터(response)로 받을 수 있음
    (fetched에 then으로 전달 된 함수가 실행 되면 response 객체가 전달됨)
  • response.json() -> promise
  • 이 promise는 json텍스트를 js의 데이터 타입으로 컨버팅을 해줌. 프로미스는 컨버팅 작업이 끝났을 때 .then()을 호출한다
  • fetched.catch(function(reason){}); promise를 리턴하는 함수가 실행됐을 때 실패 했다면 catch 안으로 전달된 콜백 함수가 호출됨
  • reason 파라미터에 실패한 이유가 전달 됨

Promise를 왜 쓰냐,,,

비동기적인 작업을 처리할 때 그 작업이 성공했는지 실패했는지를 표준화된 방식을 이용해서 처리할 수 있도록 함
성공했을 때는 .then()으로 전달된 함수, 실패했을 때는 .catch(err)로 전달된 함수가 실행 될 것이다

이 아저씨 이렇게 설명 해놓고 맘에 안든데,,,

profile
킴릴로

0개의 댓글