Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
Tags
- Vanilla
- 클론코딩
- 마무리
- github
- Clone
- javascript
- expo
- Hook
- CSS
- 느낀 점
- HTML
- 계획
- 오류
- Nicolas
- 코코아톡
- Project
- 프로젝트
- vanilla js
- Nomad
- 자바스크립트
- TiMER
- coding
- Netflix
- react
- react-hook
- scflix
- 바닐라 자바스크립트
- Nomad coder
- react-native
- Firebase
Archives
- Today
- Total
꾸매코딩
[JavaScript] 비동기 처리 - Async / Await이란 무엇인가? 본문
반응형
비동기 처리의 중요성
시간이 걸리는 코드를 비동기 처리하지 않으면 문제가 발생할 수 있음
Ex) 서버에서 Data를 받아와서 출력해야 하는 상황에 비동기 처리를 하지 않으면
Data를 받을때 까지 기다리며 다음 코드들도 기다리게 됨
Promise의 문제 점
체이닝(.then .then .then ...)을 계속하다 보면 코드의 가독성이 떨어짐
Async / Await
비동기 처리방식인 콜백 함수와 프로미스(promise)의 단점을 보완
비동기 처리 패턴 중 가장 최근에 나온 문법
프로미스를 간결하고 동기적으로 실행되는것 처럼 보이게 만들어주는 API
Async를 사용하면 함수의 코드 블록이 자동으로 Promise로 변환 됨
Async / Await 사용 방법
function 앞에 async 키워드
Promise를 리턴하는 모든 비동기 함수 호출부 앞에는 await 키워드
const getApi = async () => {
const user = await fetch('domain.com/');
...
}
try - catch 구문 사용 가능
const getApi = async () => {
const user = await fetch('domain.com/');
...
try{
...
}
catch (err) {
console.log(err);
}
}
반응형