[7주차] 리액트숙련: 비동기 프로그래밍 입문(Promise)

비동기 프로그래밍 입문

Promise 객체에 담겨있는 주요한 상태정보

- 대기(pending) : locahost 네이버에 API 요청을 한 직 후. 아직 성공(resolve)나 실패(rejected)되지 않은 상태

- 이행(fulfilled) : 네이버가 정상적으로 데이터를 localhost에게 전달해준 상태

- 거부(rejected) : 어떠한 이유인지는 모르지만 네이버가 locahost 에게 데이터 전달을 못해준 경우

 

Promise 객체 핸들링 방법

- then~catch (ES6)

(1) then

(1) then

axios.get('api 주소')
.then (콜백함수가 인자로들어옴) 데이터가 이행되었을 경우

 

axios.get('api 주소')
.then(response => {  then의 인자인 콜백함수의 인자는 response가 들어간다.
  함수로직
})

 

axios.get('api 주소')
.then(response => {  
  console.log(response); 여기서 reponse 는 객체다. 우리는 axios를 통해 데이터를 받아왔을 때 response.data 를 통해 데이터를 받아온다.
})

 

(2) catch

(2) catch

axios.get('http://api.naver.com/weather/today')
.then(response => {
  console.log('정상처리 되었습니다 : ' + response);
})
.catch(error => {   데이터가 이행되었을 경우 catch 사용, catch의 인자로 콜백함수가 들어가고, 그 콜백함수의 인자로는 error 라는 객체가 들어간다
  console.log('오류가 발생하였습니다 : ' + error);
})

 

 

(3) finally

(3) finally

 

axios.get('http://api.naver.com/weather/today')
.then(response => {
  console.log('정상처리 되었습니다 : ' + response);
})
.catch(error=> {   
  console.log('오류가 발생하였습니다 : ' + error);
})
.finally(()=>{   fulfilled 이건 rejected 이건 항상 실행되는 것  정상인 경우 then과 finally 실행 / 실패인경우 catch와 finally 실행
  console.log('항상 실행되는 부분입니다!');
}) ;

 

 

 

정리

axios.get('http://api.naver.com/weather/today')  Promise 객체
.then(response => {
  console.log('정상처리 되었습니다 : ' + response);   Promise = { then : 콜백함수(response = { data: ~ } ) }
})
.catch(error=> {   
  console.log('오류가 발생하였습니다 : ' + error);  Promise = { catch : 콜백함수(error = { key: value} ) }
})
.finally(()=>{   
  console.log('항상 실행되는 부분입니다!');
}) ;

 

 

 

- async / await (ES7)

(1) async / await 

(1) async / await 

getWeather 라는 함수를 만든다.

화살표 함수에서 소괄호 앞에 async 를 넣는다 ( : 이 함수는 비동기 함수임을 말해줌 )

async가 있는 이 함수는 await 을 만나면, await 문이 끝날때까지 기다렸다가 모두 끝나면 그 다음줄을 실행한다.

const getWeather = async () => {
  try {
     const response = await axios.get('http://api.naver.com/weather/today');
     console.log('정상처리 되었습니다 : ' + response);
 } catch (error) {
     console.log('오류가 발생하였습니다 : ' + error); } }

---

우리는 왜 then/catch 와 async/await 를 사용해야 하는가?

코드를 짜다보면,

순서대로 작동하는 동기적 프로그래밍이 효율을 높일 때도 있다.

하지만 동시에, 실행중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식(비동기적 프로그래밍 방식)을 통해 효율을 높이는 경우도 있다.

 

비동기적 프로그래밍의 예를 들면,
데이터를 외부에서 받아와서 그 데이터를 이용해 함수로직을 실행다는 전제 하에
1) 동기적 프로그래밍을 하게된다면, 데이터 요청 후 데이터가 모두 받아와 지기도 전에 데이터를 다루는 함수가 실행이 안될 수 있다. 특히 이는 데이터가 받아와지는 데 시간이 오래걸리는 경우에 더 문제가 된다. 

2) 따라서, 비동기적 프로그래밍을 통해 특정 작업이 완료될때까지 기다리지 않고 다른 작업을 진행할 수 있도록 하고 (동기적으로 할 때, 데이터가 안받아와지면 그 후에 모든 작업이 불가해지기 때문에), 그 특정 작업이 완료되면 완료되는 대로 바로 관련 함수로직이 실행되게 한다. 그럼 데이터가 안받아와지면 그 영역은 어떻게 되는가? 이런 경우를 대비해 catch 문을 then과 async/await 모두에서 쓰는 것이다.