async & await

자바스크립트 비동기 처리방식중 하나

async추가 => Promise 반환

 

async & await의 기본적인 문법 구조

 

async function 함수명() {
  await 비동기_처리_메서드_명();
}

먼저 함수의 앞에 async 라는 예약어를 붙이고

함수의 내부 로직 중 HTTP 통신을 하는 비동기 처리 코드 앞에 await를 붙인다.

[!주의] 비동기 처리 메서드가 꼭 프로미스 객체를 반환해야 await가 의도한 대로 동작한다.

일반적으로 await의 대상이 되는 비동기 처리 코드는 Axios 등 프로미스를 반환하는 API 호출 함수다.

---

* fetch를 호출하게 되면 브라우저는 네트워크 요청을 보내고 Promise가 반환된다.

그래서 .then 메서드를 통해서 반환 받은 Promise를 사용하는 것

 

fetch('toFecth....')
.then(res => res.json() )
.then(hi => {
	console.log(hi)
})
.catch(e => {
  console.log('문제 발생' + e.message);
});

 

res-> response 응답된걸 json()형태로 *파싱 (parsing: 구문 분석)

 

*parsing : 데이터를 분석,분해해서 원하는 형태로 조립 -> 웹상에서 받아온 정보를 원하는 형태(여기선 json)로 가공해서서버에서 불러들이는 것.

---

 

async function hiFetch(){
	let res=await fecth('toFecth....')
	let hi=await res.json();
}

hiFetch.catch(e => {
  console.log('문제 발생' + e.message);
});

 

기본적인 사용방법은 이렇다.

 

React에서 사용한 예시

getMovies를 함수 선언한 부분앞에 async 그리고 응답받을 api를 담고있는 fetch앞에 await를 붙이고

아래 json이라는 변수에 응답된걸 json()으로 파싱해서 담아서 setMovies라는 함수에 담았다.

 

-- 나중에 더 공부해 나가면서 부족한 내용은 추가로 작성하겠다.

 

-참고 -

 

https://joshua1988.github.io/web-development/javascript/js-async-await/

https://developer.mozilla.org/ko/docs/conflicting/Learn/JavaScript/Asynchronous/Promises