-
Axios 설치 및 사용React 2023. 7. 21. 23:07
동기 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
'React' 카테고리의 다른 글
에러 일지 TypeError: Cannot read property 'hasOwnProperty' of undefined (2) 2023.11.28