Ajax
서버와 문자만 주고 받을 수 있다.
"{ name: "kim" }" 따옴표 쳐놓으면 array,object도 주고받기 가능 : json 문법
(1) XMLHttpRequest
(2) fetch()
(3) axios
Axios
Axios는 브라우저, Node.js를 위해서 만들어진 Promise API를 활용하는 HTTP 비동기 통신 라이브러리 입니다.
문법코드
axios.get(url,[,config])
import axios from "axios"
<button
onClick={() => {
axios
.get("https://codingapple1.github.io/shop/data2.json")
.then((result) => {
console.log(result);
})
}}
>
데이터 요청
</button>
요청 실패 할 경우 catch
axios.get("https://codingapple1.github.io/shop/data2.json")
.then((result) => {
console.log(result);
}).catch(() => {
console.log("실패");
});
동시에 ajax 요청 여러개 하려면 Promise.all
Promise.all([axios.get("/url1")], [axios.get("/url2")]);
.then(()=>{})
Fetch vs Axios
Axios |
Fetch |
써드파티 패키지로 설치 쉽습니다. npm install axios |
Built-in APIs 로 별도의 설치 필요 없이, 모던 브라우저에서 사용 가합니다. |
wide browser 지원 | 오직 크롬 42+, firefox 39+, edge 14+, safari 10.1+ 지원. polyfill 이용해서 하위 호환성 지원 가능 |
XSRF Protection 보안 기능 제공 |
없음. |
자동 JSOM 데이터 변환 지원 |
JSON 데이터 핸들링 위해 추가 절차 필요. Fetch interface 의 json() 이용하는 로직 추가하여 가능 |
Request 취소 와 Request Timeout 설정 가능 |
없음. AbortController 이용하여 구현 가능 |
HTTP Requests 의 Intercept 가능 |
Intercept Requests 기본적으로 제공되지 않음. Global Fetch Method를 Overwrite 하여 나의 인터셉터 정의 가능 |
Download Progress 지원 |
Upload Progress 지원안함. Response Object의 Body Property 통해 제공되는 ReadableStream 인스턴스 이용 가능 |
Post
서버로 데이터를 전송하는 post
axios.post("/url", { name: "kim" });
참고 블로그 :https://koras02.tistory.com/48
https://tlsdnjs12.tistory.com/26
'프론트엔드로 가는 길 > react' 카테고리의 다른 글
08. react_redux (0) | 2023.01.30 |
---|---|
07. 자연스러운 메뉴 만들기 (0) | 2022.12.26 |
05. LifeCycle & UseEffect (0) | 2022.12.24 |
04. localeCompare (문자정렬) (0) | 2022.12.23 |
03. find() 함수로 원하는 요소 반환 (0) | 2022.12.23 |