Axios

반응형

📍Axios

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

- 요청과 응답을 모두 json 형식으로 반환

 

☑️ 비동기( Asynchronous)

 

비동기는 사전적으로 '동시에 일어나지 않는다'는 의미를 갖고 있습니다.
프로그래밍에서 비동기는 작업이 독립적으로 실행되며,
작업의 완료 여부를 기다리지 않고 다른 작업을 실행할 수 있는 방식을 의미합니다.
즉, 비동기 방식은 작업이 시작되면 해당 작업이 완료될 때까지 기다리지 않고 다음 코드를 실행할 수 있습니다.

 

☑️fetch와의 차이점 

fetch(api url) =>  response => json
axios(api url) => json
단 설치가 필요 

📍axios 모듈 설치

해당 파일에 들어가서

npm install axios --save

 

 

📍사용법

☑️ 1) GET / 데이터를 받을 때

GET 요청은 일반적으로 정보를 요청하기 위해 사용되는 메서드( 서버로부터 데이터를 받아옴) 

• 첫번째 인자 : url주소 (필수)
• 두번째 인자 : 요청 시 사용할 수 있는 옵션들을 설정 (필수 X)
• 캐싱 가능 : 캐싱 : 한번 접근 후 재요청시 빠르게 접근하기 위해 레지스터에 데이터를 저장시켜 놓는 것

axios.get("url"[,config])

 

 

☑️ Config (옵션)

 

params: URL 쿼리 매개변수를 설정합니다.

data: POST 요청 시 전송할 데이터를 지정합니다.

headers: 요청 헤더를 설정합니다.timeout: 요청 시간 초과를 설정합니다.

responseType: 응답 데이터 형식을 지정합니다 (예: 'json', 'blob' 등).

 

☑️ async/await 

https://joohee0826.tistory.com/48

Async/Await

 

 

비동기로 처리시 promise(pendeing) 즉 기다리는 상태가 됨 

 

따라서, 
아직 Response가 오지 않은(pending) 한 상태가 아닌 
결과값으 받은 이후에 값을 처리해주면 됨

 

방법 1)  Async Request & .then() 사용

 

 

 

방법 2) async/await 사용 ⭐️ 

 

 

 

 

☑️ 예시 (async/await 사용)

// axios를 사용하기 위해서는 설치한 axios를 불러와야 한다.
import axios from 'axios';

// **Async / Await ver
 async function request() {
   const response = await axios.get('https://koreanjson.com/users/1');
   const { data } = response;
   console.log(data);
 }

 request();

 

async function ...(){
	try{
  	const response = await axios.get('...');
    console.log(response);
  	} 
  	catch(error){
  	console.error(error);
  	}
}

 

☑️ 실전 예시

 

1) Axios를 사용하여 현재 상영 중인 영화 정보를 가져오고, 그 중 무작위로 하나의 영화 ID를 선택하는 과정 예시

const fetchData = async () => {
    //현재 상영중인 영화 정보 가져오기(여러영화)
    //요청을 보내는 곳에 await 사용
    const response= await axios.get(requests.fetchNowPLaying);
    //여기서는 api폴더를 따로 생성하여 인스턴스화 함 get(url)
    //여러 영화 종 하나의 영화 id 가져오기
    const movieId =
      response.data.results[
        Math.floor(Math.random() * response.data.results.length)
      ].id;

 

 

2) 특정 영화의 상세 정보를 가져오는 비동기 작업을 수행하는 예시

  //특정 영화의 더 상세한 정보 가져오기 (비디오 정보도 포함)
    const { data: movieDetail } = await axios.get(`movie/${movieId}`, {
      params: { append_to_response: "videos" },
    });
    setMovie(movieDetail);
  };

 

1. Axios GET 요청

• axios.get(...): Axios 라이브러리를 사용하여 GET 요청을 보냅니다. 여기서는 movie/${movieId}라는 URL로 요청을 보냅니다.
  • ${movieId}: 템플릿 리터럴을 사용하여 변수 movieId의 값을 URL에 포함시킵니다. 이 값은 특정 영화의 ID입니다.

2. await

• 비동기 처리: await 키워드는 비동기 함수 내에서 사용되며, 프로미스가 해결될 때까지 실행을 일시 중지합니다. 여기서는 Axios의 GET 요청이 완료될 때까지 기다립니다.

3. 구조 분해 할당

const { data: movieDetail } = ...

• 구조 분해 할당: Axios의 응답 객체에서 data 속성을 movieDetail이라는 이름으로 추출합니다. 즉, movieDetail 변수는 요청한 영화의 상세 정보가 담긴 객체가 됩니다.

4. params 속성

• params: Axios 요청의 두 번째 인자로 전달되는 객체로, URL 쿼리 매개변수를 설정합니다.
  • append_to_response: "videos": 이 매개변수는 API에 추가적인 요청을 하여 비디오 정보를 포함하도록 지시합니다. 즉, 영화 상세 정보와 함께 해당 영화의 비디오 정보도 함께 가져옵니다.

5. 상태 업데이트

setMovie(movieDetail);

• 상태 업데이트: setMovie 함수를 호출하여 movieDetail을 상태로 설정합니다. 이 함수는 일반적으로 React의 useState 훅으로 생성된 상태 업데이트 함수일 가능성이 높습니다. 이로 인해 컴포넌트가 다시 렌더링되고, UI가 새로운 영화 정보를 반영하게 됩니다.

 

 

 

3) 

const fetchSearchMovie = async (searchTerm) => {
        try{
            const response = await axios.get(`/search/multi?include_adult=false&query=${searchTerm}`);
            setSearchResults(response.data.result);
        } catch (error) {
            console.log(error);

        }

    }

 

☑️ 예시 (promise 사용)

 
 // **Promise ver
axios
  .get('https://koreanjson.com/users/1')
  .then((response) => {					// response.json() 이 없다.
    console.log(response);			
    const { data } = response;          // 대신 response 객체 속 data 키 값만 가져와야 함.
    console.log(data);
  })
  .catch((error) => console.log(error));
 
 const axios = require(`axios`)
 
 //=========================

axios.get('...')

   // 응답(성공)
   .then(function(response){
   	console.log(response);
   })
   
   // 응답(실패)
   .catch(function(error) {
   	console.log(error);
   })
   
   // 응답 (항상 실행)
   .then(function(){
   	// ...
   })

 

 

 

☑️Post

- 서버로 데이터를 전송하여 자원을 생성

- json 형식이나 객체 형식으로 데이터를 전송 가능

- 데이터를 body에 포함

- 캐싱 불가능

- 문자열 뿐만 아니라, 라디오 버튼 , 텍스트 박스와 같으 객체들의 값도 전송 가능 

 

const axios.post = () => {
	const data = {
    	name : 'name',
        age: 23
    }
    
    axios.post("http://localhost:8000/post", data)
    	.then((response => {
        	console.log(response)
        })
        .catch((error) => {
        	console.log(error);
        })
}

 

☑️Put

-서버에 존재하는 Database 자원을 수정

 

☑️Delete

- 서버에 존재하는 데이터베이스 자원 삭제 

// DELETE 요청의 두 번째 인자에 data: {} atrribute를 넣기
const axios_delete = () => {
	axios.delete("http://localhost:8080/delete",
    {
    	data: {
        	postId: ...
            commentId: ...
        }
    });
}

📍Axios 인스턴스화 
 : 중복된 부분을 계속 입력하지 않아도 되기 때문에

 

에서...

 

중복되는 요소가 존재

 

 

 

 

☑️인스턴스 생성할 폴더 파일 생성
src/api/   axios.js , request.js 

 

☑️axios_js 

const instance = axios.create({

  baseURL: "https://api.themoviedb.org/3",

  params: {

    api_key: "99e2b135ff4afc4350aa59165158ff64",

    language: "ko-KR",

  },

});

export default instance;

 

baseURL : 중복되는 부분

 

 

☑️request.js

이부분

- 요청할 다른 부분 작성 해 놓는 것

const requests = {

  fetchNowPLaying: "movie/now_playing",

  fetchTrending: "/trending/all/week",

  fetchTopRated: "/movie/top_rated",

  fetchActionMovies: "/discover/moive?width_genres=28",

  fetchComedyMovies: "/discover/moive?width_genres=35",

  fetcHorrorMovies: "/discover/moive?width_genres=27",

  fetchRomanceMovies: "/discover/moive?width_genres=10749",

  fetchDocumentaries: "/discover/moive?width_genres=99",

};

export default requests;

 

 

 

https://doyu-l.tistory.com/252

[JS] Axios

 

https://velog.io/@dusunax/AXIOS%EB%9E%80-feat.-React

AXIOS란? (feat. Fetch API)

 

https://third9.github.io/posts/Axios%EB%8B%A4%EC%96%91%ED%95%98%EA%B2%8C_%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0-async_await%EC%82%AC%EC%9A%A9/

Axios 다양하게 활용하기: async/await사용 - Third9's Lounge