React - ajax 2

Inseok Park·2022년 8월 23일
0

React 쇼핑몰 만들기

목록 보기
8/15
post-thumbnail

POST 요청 하는 법

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

위 코드 실행하면 서버로 { name : 'park' } 자료가 전송된다.
완료시 특정 코드를 실행하고 싶으면 이것도 역시 .then() 뒤에 붙이면 된다.

동시에 AJAX 요청 여러개 날리려면

Promise.all( [axios.get('URL1'), axios.get('URL2')] )

위 코드를 URL1, URL2로 GET요청을 동시에 해준다.
둘 다 완료시 특정 코드를 실행하고 싶으면 .then() 뒤에 붙이면 된다.

원래 서버와는 문자자료만 주고받을 수 있다

object/array 같은 데이터는 주고 받지 못한다.
object/array 자료에 따옴표를 추가하면 된다.

"{"name" : "park"}"
이걸 JSON 이라고 한다.
JSON은 문자 취급을 받기 때문에 서버와 자유롭게 주고받을 수 있다.

실제로 결과.data를 출력해보면 따옴표쳐진 JSON이 나와야하는데
axios 라이브러리는 JSON -> object/array 변환작업을 자동으로 해줘서
출력해보면 object/array가 나온다.
axios👍

fetch()

바닐라 자바스크립트 문법인 fetch() 를 이용해도 GET/POST 요청이 가능한데
JSON -> object/array를 자동으로 안바꿔줘서 직접 바꾸는 작업이 필요하다.

fetch('URL').then(res => res.json()).then((res) => { console.log(res) } )

0개의 댓글