05. React Axios

Axios

:브라우저, node.js를 위한 promise API를 활용하는 HTTP 비동기 통신 라이브러리

• 설치방법:

npm install axios 

터미널에 입력한당

• 요청 옵션
  -method:get이 기본값,(put, post,patch등 있음)
  -url: 서버주소
  -baseurl:url앞에 붙는 주소로 앞에 공통으로 같은 부분
  
  ex) url /movieRate이고 baseurl 이 http://api.themoviedb.org/3 라면
  http://api.themoviedb.org/3/movieRate으로 이동
  -params: url parameter(?key=value 로 요청하는 url get방식을 객체로 표현한 것)
  
  
• axios method

axios get

: 단순 데이터를 요청할 경우, 파라미터 데이터를 포함시키는 경우

<script>
const axios=require('axios');
axios.get('/user?ID=721)
.then(function(response)){
//성공시 실행 함수
console.log(response);
})
.catch(functioin(error){
console.log(error);
})
.finally(function(){
//항상 실행되는 함수
});

//위와 같은 예시
axios.get('/user',{
params:{
ID:721}})
.then~~뒤에서 부턴 동일
</script>

axios post

: 데이터를 message body에 포함시켜 보내는 방법

<script>

axios.post("url",{
	firstName:"bom",
 lastName:"oh"})
 .then(function(response)){
 })
 .catch(function(error){
 })
</script>

axios delete

: 일반적으로 body가 비어있다. DB에 저장되있는 내용을 삭제하는 목적으로 사용함

<script>
	axios.delete(`/user?ID=721)
 .then(~~위와동일)
 
 
 //더 많은 정보를 담아야 할때는 두번째 인자에 data를 추가해줄수 있다.
 axios.delete('/user?ID=721',{
 	data:{
     firstName:"bom",
     lastName:"oh"
     }
     })
     .then~~
</script>

axios put

: DB에 저장되있는 내용을 갱신하는 목적, 내부적으로 get->post과정을 거침

<script>
	axios.put("url",{
    	userName:"bom"})
        .then~~
</script>

• axios 인스턴스화
  : 중복되는 부분을 계속 입력하지 않기 위해 사용

//axios.js

<script>
import axios from "axios";
const instance=axios.create({
	baseURL:"",
    params:{
    	api_key:
        language:"ko-KR"
        },});
        
 export default instance;
</script>

//requests.js

<script>
const requests={
    fetchNowPlaying:`/movie/now_playing`,
    fetchNetflixOriginals:`/discover/tv?with_networkds=213`,
    fetchTrending:`/trending/all/week`,
    fetchTopRated:`/movie/top_rated`,
}

export default requests;
</script>

//axios  이용하여 현재 상영중인 영화불러오기
const request=axios.get(requests.fetchNowPlaying);

참고자료🚀:
https://inpa.tistory.com/entry/AXIOS-%F0%9F%93%9A-%EC%84%A4%EC%B9%98-%EC%82%AC%EC%9A%A9#Axios_%EB%8B%A8%EC%B6%95_%EB%A9%94%EC%86%8C%EB%93%9C(정말 감사합니다..🧡)

따라하며 배우는 리액트 강의 자료