비동기 통신 Axios fetch + async + await
1) Fetch 함수 – IE에서 지원이잘 안됨. : 원격 API를 간편하게 호출 할 수 있도록 브라우져에서 제공하는 fetch()함수 - window.fetch(url, option);
2) 외부 lib 사용(Promise기반의 Http 비동기 통신라이브러리) : 원격 API를 호출 하는 라이브러리 - jQuerylib - Axios lib
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>비동기 통신 fetch +async + await</h1>
<script>
console.log("시작")
const test = async ()=>{
try{
const res = await fetch("https://jsonplaceholder.typicode.com/users")
const jsonResult = await res.json();
jsonResult.forEach((user, index)=>{
console.log(index+"=" +user.id + "|" + user.name + "|" + user.email);
});
} catch(err){
console.log(err);
}
}
test();
</script>
</body>
</html>
https://jsonplaceholder.typicode.com/users 백엔드가 없어서 일단 통신은 해당 url로 해준다.
'Dev > React' 카테고리의 다른 글
| [React Axios] Axios 호출 방법 2가지 | 기본호출, 인스턴스 (0) | 2026.04.09 |
|---|---|
| [React Axios] .then / async-await 함수 비교 실습 (0) | 2026.04.09 |
| [React] 비동기 통신 Ajax 이해하기 | Axios 비교 (0) | 2026.04.09 |
| [React] TodoList 실습으로 핵심 문법 - 데이터 전달과 CRUD (0) | 2026.04.08 |
| [React] Hooks 실습 예제 , useEffect , useMemo (0) | 2026.04.06 |
