본문 바로가기

💻WEB FrontEnd/프레임워크 React

Ajax로 서버와 통신

Ajax를 사용하려면 다음 세 가지 방법이 있다.

  1. XMLHttpRequest
  2. fetch()
  3. axios

1. axios 라이브러리 사용

1) axios 라이브러리 설치

npm install axios

 

2) App.js에 axios 라이브러리 import

import axios from 'axios'

 

3) AJAX GET 요청하기

<button onClick={()=>{
	axios.get('https://codingapple1.github.io/shop/data2.json').then((결과)=>{
		console.log(결과.data)
	})
	.catch(()=>{
		console.log('실패함')
	})
 
	//동시에 ajax 요청 여러개하려면
	Promise.all( [axios.get('URL1'), axios.get('URL2')] )
}}>버튼</button>

 

4) AJAX POST 요청하기

axios.post('URL', {name : 'kim'})