본문 바로가기
프론트엔드로 가는 길/react

06. Ajax

by woody-j 2022. 12. 25.

 

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

 

React | Axios란? (feat. Fetch API)

# Intro React는 효율적인 UI 구현을 위한 라이브러리입니다. HTTP Client(HTTP 상에서 커뮤니케이션 하는 자바기반 컴포넌트) 를 내장하고 있는 Angular와 다르게, 리액트에는 따로 내장하는 내장클래스가

koras02.tistory.com

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