[React] api 호출, Axios

axios

가장 많이 사용되고 있는 자바스크립트 HTTP 클라이언트. 

Http요청을 Promise 기반으로 처리 

 

yarn add axios

---

axios GET

파라미터로 전달된 주소에 GET요청.

.then을 사용하거나 async/await를 통해 리턴받은 데이터 확인

const getData = () => {
	axios.get(url)
	.then(response =>{
		return response;
	})
}

const getData = async () => {
	return await axios.get(url)
}

 

axios POST

첫번째 파라미터에 URL 주소, 두번쨰 파라미터에 request data를 넣고 api 호출

const postData = async (postParam) => {
    return await axios(url, postParam)
}

 

---

에러처리 

 

const postData = async (postParam) => {
	let res = null;
	try{
    	res = await axios(url, postParam)
    }catch(error){
    	console.log(error)
    }
    
    return res;
}

 

 

---

axios 모듈 생성

import axios from 'axios';

const apiUtil = axios.create({
    baseURL: 'https://www.domain.com',
    changeOrigin: true,
    timeout : 5000,
    headers: {"Content-Type": 'application/json'},
});

apiUtil.interceptors.request.use(
    function (config) {
    	//request 정상
        //api 공통 헤더(token 등)를 심을 때 일괄처리
        return config;
    },
    function (error) {
    	//request 에러
        return Promise.reject(error);
    }
);

apiUtil.interceptors.response.use(
    function (response) {
    	//response 정상
        return response;
    },
    function (error) {
    	//response 에러
        //token에러 등 공통 에러에 대한 예외처리 지정
        return Promise.reject(error);
    }
);

export default apiUtil;

import apiUtil from './apiUtil.js';

export const getData1 = async () => {
	// url = url + get파라미터
    const url = '/path?param1=1&&param2=abc';
	return await apiUtil.get(url);
}

export const getData2 = async (reqData) => {
	const url = '/path';
	return await apiUtil({
    	url : url,
        method : 'get',
        data : reqData
    })
}

export const postData1 = async (reqData) => {
	const url = '/path';
	return await apiUtil.post(url, reqData)
}

export const postData2 = async (reqData) => {
	const url = '/path';
	return await apiUtil({
    	url : url,
        method : 'post',
        data : reqData
    })
}

 

 

---

* api전송 중 cors에러로 호출이 안되는 경우,

package.json에  proxy를 추가하고 axios의 url이 들어갈 자리에 path만 전송하면 호출이 가능하다.

단, cra로 실행하는 경우(yarn start)에만 가능하고 build하여 배포하는 경우에는 적용되지 않는다.

//package.json

{
  "name": "reactapp",
  "version": "0.1.0",
  "private": true,
  "proxy": "https://www.domain.com",
  "secure": false
  ...
}

//api.js

export const getData = async () => {
	return await axios.get('/path/...')
}

 

 

---

참조 :

리액트를 다루는 기술(김민준 / 길벗)

xn--xy1bk56a.run/axios/guide/api.html