-
43. Ajax- Axios, Promise.all, fetch함수 복습하기Java Script & Type Script 2023. 3. 18. 01:28728x90
AJAX
Asynchronous JavaScript And XML의 약자이며,
자바스크립트를 이용해 클라이언트와 서버 간에 데이터를 주고받는 비동기 HTTP 통신입니다.
XMLHttpRequest(XHR) 객체를 이용해서 전체 페이지가 아닌 필요한 데이터만 불러올 수 있습니다.AJAX로 GET/POST요청하려면 방법 3개 중 택1 하면 됩니다.
1. XMLHttpRequest라는 옛날 문법 쓰기
2. fetch() 라는 최신 문법 쓰기
3. axios 같은 외부 라이브러리 쓰기axios.get("https://codingapple1.github.io/shop/data2.json") .then((data) => { console.log(data); }) .catch(()=>{ console.log('통신실패') })
Ajax 동시에 여러개 요청하기
Promise.all( [axios.get('URL1'), axios.get('URL2')] ) .then (()=>{})
Promise.all을 이용하면 안에있는 여러개의 axios통신을 모두 마친 뒤 then 실행.
원래 서버와 문자형만 주고받을 수 있다.
근데 "따옴표"를 이용하면 편법같이 배열, 객체형태도 주고받는게 가능하다.
그걸JSON형태라고 부름.
fetch() -라이브러리 설치없이 JS문법으로 GET요청 가능
근데 번거롭게
.then (res=>res.json())
.then (data=>{})
이런 과정이 필요.
axios쓰면 이런 과정 생략가능!728x90'Java Script & Type Script' 카테고리의 다른 글
[React] 다섯종류의 조건부 렌더링 (0) 2023.03.21 [React] 리덕스 초기 세팅, 리듀서만들기 복습 (0) 2023.03.21 [React] 컴포넌트의 Lifecycle [useEffect에대한 고찰 2] 컴포넌트야 인생 원래 그런거야 (0) 2023.03.18 [React] Styled component props 문법 (0) 2023.03.17 39. [after final project] Gnims 개선 - 리액트 framer-motion 라이브러리로 애니메이션효과 넣기 (0) 2023.03.16