데이터 불러오기

콜백

콜백은 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다. 콜백을 넘겨받는 코드는 필요에 따라 즉시 실행할 수도 있고 아니면 나중에 실행할 수도 있다.

 

콜백을 쓰는 이유

js에서 비동기적 프로그래밍을 할 수 있어서 이다.

js는 싱글 스레드를 사용하는데 블록킹(멈춤)을 방지하여 싱글스레드를 사용할 수 있게 한다.

 

Promise

Promise는 js 비동기 처리에 사용되는 객체이다.

개인적으로 자바의 try-catch 예외처리가 떠오르는데 예외처리를 둘다 해줘서 그런것 같다.

코드 모양세도 비슷하다.

 

try {

//예외발생할 가능성이 있는 문장 
    
}catch(Exception e) {

 //Exception이 발생했을 경우, 이를 처리하지 위한 문장적는다.
 //보통 이곳에 예외메세지를 출력하고 로그로 남김.

}finally{

//예외발생여부에 관계없이 상항 수행되어야 하는 문장적는다.

}

const promise = new Promise((resolve, reject) => {
	// 처리 내용
})

promise.then(
	//resolve가 호출되면 then이 실행
)
.catch(
	// reject가 호출되면 catch가 실행
)
.finally(
	// 콜백 작업을 마치고 무조건 실행되는 finally(생략가능)
)

Promise의 3가지 상태

1. Pending(대기)

new Promise() 메소드를 호출하면 pending 상태가 된다. 이 때 콜백 함수를 선언할 수 있다.

new Promise(function(resolve, reject) {
  // ...
});

 

2. Fulfilled(이행)

resolve되면 then으로 넘어가 로직을 이어간다. 

 

3. Rejected(실패)

reject되면 catch로 가 예외처리를 해준다.

 

async와 await

 

1. async

function 앞에 async를 붙이면 해당 함수는 항상 프로미스를 반환한다.

 

2. await

js는 await 키워드를 만나면 프로미스가 처리될 때까지 기다린다.

프로미스가 처리되길 기다리는 동안에 엔진이 다른일을 할 수 있기에 CPU 리소스가 낭비되지 않는다.

async 함수에서만 사용할 수 있다. 그 말은 곧 await가 최상위 코드에서 작동할 수 없단는 말이기도 하다.

 

async/await와 promise.then/catch

async/await을 사용하면 await가 대기를 처리해주기 때문에 .then이 거의 필요하지 않다. 여기에 더하여 .catch 대신 일반 try..catch를 사용할 수 있다는 장점도 생긴다. 항상 그러한 것은 아니지만, promise.then을 사용하는 것보다 async/await를 사용하는 것이 대개는 더 편리하다.

 promise

function loadJson(url) {
  return fetch(url)
    .then(response => {
      if (response.status == 200) {
        return response.json();
      } else {
        throw new Error(response.status);
      }
    })
}

loadJson('no-such-user.json')
  .catch(alert); // Error: 404

async

async function loadJson(url) { // (1) 함수 loadJson은 async 함수가 됨
  let response = await fetch(url); // (2) 함수 안의 .then을 전부 await로 바꿈

  if (response.status == 200) {
    let json = await response.json(); // (3) wait를 사용해도 되지만, 아래처럼 return response.json()를 사용해도 됨
    return json;
  }

  throw new Error(response.status);
}

loadJson('no-such-user.json')
  .catch(alert); // Error: 404 (4) loadJson을 호출하는 코드는 async 함수 내부가 아니기 때문에 await loadJson(…)을 사용할 수 없다.

---

Axios와 Fetch

axios 와 fetch의 차이점은 fetch에서는 data를 law하게 받지만 axios는 json 형식이 default이다.(더 편하다!)

 

Axios 
아래 링크를 찬찬히 읽어보며 직접 해보자

https://www.youtube.com/watch?v=d6suykcsNeY 

https://axios-http.com/kr/docs/intro

시작하기 | Axios Docs