Ajax / axios

Ajax는 서버에 새로고침 없이 요청을 할 수 있게 도와주는 친구입니다.

개념부터 잡고 가자면

 

서버 : 페이지 요청을 하면 페이지를 가져다주는 곳이라고 생각하면 됩니다유

• GET 요청 : 특정페이지 or 자료 읽기 등등 URL에 주소치는것도 다 GET요청 입니다유
• POST 요청 : 로그인과정을 생각해보면 내가 적은 ID/PW 를 서버로 보내야겠쥬 ?  그런것이 다 POST 요청입니다.  

그래서 서버에 이런 요청들을 하면 원래 페이지가 새로고침이 됩니다. 

 

근데 새로고침없이 부드럽게 요청하려면 Ajax를 쓰면 됩니다이

 

 그래서 Ajax를 어떻게 쓰냐~~ 하면

 

jQuery 라이브러리 --->  $.ajax() 쓰든가

axios 라이브러리   --->  axios.get() 쓰든가

JS                      --->  Fetch() 쓰든가

 

하면 되는데 저는 axios를 설치했어유 ( 설치는 npm install axios ) 

 

 

---

그럼 또 axios 를 어떻게 사용하냐~~ 하면

짜잔! import 필수

 

위에 캡쳐한 코드를 설명하자면

 

버튼 하나를 만들고 클릭시에 요로코롬 하겠다 ~~ 하는것인디

 

axios.get( URL )    여것을 하면 저 URL ( 데이터 가져올 곳 ) 에 GET요청을 한겁니다.

 

그럼 끝 

이라기엔 요청해서 뭐 어쩔껀데?  쓸꺼야 버릴거야 뭐 이런걸 정해줘야 되겠쥬 ?

 

---

요청이 성공했다. 그럼 이걸 해줘라 라고 할때 쓰는게 

.then( callback func ) 이에유~ 

 

또 callback func의 파라미터는 내가 가져온 데이터 랍니다.

 

예를 들면 이렇게 쓰면 됩니다.

.then ( (result) => { console.log( result ) } ) 

이러면 요청 성공시에 콘솔창에 내가 가져온 데이터를 띄워주세요! 입니다.

 

 

 

여기서 급 axios 의 꿀기능 설명인데유~

 

우리가 서버랑 데이터를 주고 받을 때는 object 자료형으론 소통이 불가능합니다.

.JSON 형식을 사용하는데 요 친구에 문자앞뒤에는 모두 따옴표( " )가 붙어있답니다.

 

그래서 JS의 fetch() 이런걸로 Ajax 요청을 했을 때에는 그 안에 있는 데이터를 사용하는게 매우 불편합니다.

따옴표가 붙어있기 때문이쥬.

 

근데 axios는 JSON안에 따옴표를 제거해서 Object 자료형으로 자동 변환해줍니다이

 

이거이 개꿀이다 얌!

 

---

요청이 실패했다. 에라이 이거라도 해줘라 라고 할때 쓰는게 

 .catch ( callback func ) 이에유~

 

사용법은 똑같겠쥬 ?

.catch ( () => { console.log( "ㅠㅠ 실패했어요" ) } ) 

이러면 요청 실패시에 콘솔창에서 울고있겠쥬

 

 

끝! 

 

코드속에 있는 spread operator ( ... ) 에 대해서는 따로 또 쓸게유

이게 아주 물건이드라고 ~