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
- Boostrap
- bootstrap
- IntersectionObserver
- Database
- Cloud
- db
- til
- Fetch
- REACT
- SQL
- 배포
- this
- url
- useEffect
- TMDB
- Protocol
- supabase
- web
- Github Pages
- jQuery
- data
- JavaScript
- nosql
- firestoredatabase
- W
- API
- HTML
- http
- CSS
- github
Archives
- Today
- Total
072DATA
async와 await 짧은 요약 본문
async function printTest() {
// await라는 키워드를 가지고 있는 공간은 반드시 비동기함수를 핸들링 할 수 있는 async 표현 필요
console.log("안녕하세요. 함수입니다!");
//fetch(알을 품다) : 데이터를 요청하는 것
//.json도 완성된 결과를 받으려면 기다려야 하는구나..
try{
//비동기 함수에 동기적 표현
// 데이터가 fullfile되기 위해서는 3초정도 시간이 걸리기 떄문에
// await를 이용해서 pending -> fullfill이 될 떄 까지 기다리기
const result = await fetch("https://jsonplaceholder.typicode.coma/users");
// .json도 비동기적으로 동작. fetch와 비슷해서 완료될 떄까지 기다려줘야함
const users = await result.json();
console.log(users);
} catch (error) {
if(error){
console.log(error);
}
}
// 동기적이 최우선 그 후로 비동기면 응답이 제일 빠른 것 부터 차례로 찍힘
//pending으로 찍히는 이유는 비동기여서
printTest();
promise는 비동기 작업이 진행 될 때 여겨지는 규칙이며
3가지 규칙이 존재함
pending은 요청하는 단계
fullfilled는 수행됐을 때 즉 성공
rejected는 단어 그대로 실패된 거절된 상태
그러하여 async 와 await 문법을 사용하여
pending이 끝날 때 까지 기다린 다음
fullfilled나 rejected를 받아 냄
또 try catch문으로 발생할 수 있는 예외를 처리하여
프로그램의 예기치 않은 종료를 방지하고,
오류가 발생했을 때 적절한 조치를 취할 수 있도록 같이 사용해줌
비슷한 문법으로 promise 체이닝(fetch, then)문법이 있는데
async, await 문법이 가독성 향상과 에러 처리에 간편함 등으로 장점이 있음
'Anything > 끄적끄적' 카테고리의 다른 글
JavaScript 실습 문제 - WalkingClass (0) | 2024.08.10 |
---|---|
콜백 함수에 대한 정리 (0) | 2024.08.09 |
일급 객체로서의 함수 (0) | 2024.08.01 |
자바스크립트에서 this란 (0) | 2024.07.31 |
데이터 타입 및 undefined와 null - JavaScript (0) | 2024.07.29 |