Axios 설치 및 사용

동기 vs 비동기

- 비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식

- 만약에 동기면 서버에게 요청을 하고 리턴 받을 때까지 다른 업무를 하지 못 함

 

 

-

• Promise API를 활용하는 HTTP 비동기 통신 라이브러리
• Promise는 간단히 말해 비동기 처리를 간단히 해주는 객체
• Promise 상태
  • Pending (대기): 비동기 처리 로직이 아직 미완료 상태
  • Fulfilled (이행): 비동기 처리가 완료되어 Promise가 결과 값을 반환해준 상태
  • Rejected (실패): 비동기 처리가 실패하거나 오류가 발생한 상태

 

 

 

설치
npm install axios

 

파일 경로

 

src/axios/axios.js

 

import axios from 'axios';

const request = axios.create({ baseURL: '' });

export default request;

axios.create로 axios 인스턴스를 생성하여 baseURL을 지정해 반복되는 코드를 줄였다.

 

 

src/constants/api.js

export const GET_RANDOM_RESTAURANT = (
  seed,
  category,
  x,
  y,
  distanceLimit,
  page,
  size
) => {
  return `/restaurants/random?seed=${seed}&category=${category}&x=${x}&y=${y}&distance_limit=${distanceLimit}&page=${page}&size=${size}`;
};

api.js에 api를 따로 빼서 관리했다. api를 수정할 일이 생기면 이곳으로 와서 수정하면 된다.

 

 

src/axios/Random.js

 

import { GET_RANDOM_RESTAURANT } from '../constants/api';
import request from './axios';

export const getRandomRestaurant = async (
  seed,
  category,
  x,
  y,
  distanceLimit,
  page,
  size
) => {
  return request.get(
    GET_RANDOM_RESTAURANT(seed, category, x, y, distanceLimit, page, size)
  );
};

get함수를 사용하여 백엔드로부터 데이터를 요청한다.

 

 

src/screens/RandomBox.js

 

 useEffect(() => {
    getRandomRestaurant(seed, category, x, y, distanceLimit, 0, 10).then(
      (res) => {
        setData(res.data.documents);
      }
    );
  }, []);

성공적으로 데이터를 받아온다면 then 함수가 실행되어 data를 가져올 수 있다.

 

 

 

출처

https://spicycookie.me/JavaScript/promise/

https://velog.io/@shin6403/React-axios%EB%9E%80-feat.-Fetch-API