8. React Axios를 사용한 통신

이번 글은 axios를 사용한 서버 통신에 대해 다루겠습니다.

axios?

Promise를 사용하는 HTTP 비동기 통신 모듈입니다.

npm install axios
yarn add axios

로 설치합니다.

사용법

import axios from 'axios'

모듈을 불러옵니다.

axios.post('url', {보낼 데이터}).then(()=> {
})

axios.get('url').then((res) => {
});

위와 같이 then 을 이용한 콜백을 사용하거나

let result = await axios.get('url')

과 같이 async/await 를 사용하셔도 됩니다.

위에서 Promise를 사용한다고 했었죠?

HTTP 코드가 400 / 500 반환 시, reject를 사용하여 에러를 던집니다 (throw).

때문에 axios에 예외처리가 필요합니다.

간단하게 로그인을 예로 들어볼게요.

axios.post('url/signin', { id : id, password : password }).then((response)=> {
	// 성공 시
}).catch((e) => {
	// 실패 시
})

try {
	let result = axios.post('url/signin', { id : id, password : password })
	// 성공 시
} catch(e) {
	// 실패 시
}

로 예외처리 할 수 있습니다.

axios instance

axios의 기본 설정입니다.

저번 시간에 common/axios 폴더를 만들었을거에요.

index.js를 생성 후

import axios from 'axios';

const axiosInstance = axios.create({
	headers: {
		'Access-Control-Allow-Origin': '*',
		'Access-Control-Allow-Headers': 'Content-Type',
		'Content-Type': 'application/json',

		// 등등의 header
	},
	baseURL: url, // baseUrl
});

export default axiosInstance;

axios.create로 인스턴스를 만들어줍니다.

baseUrl을 넣었기 때문에, 앞으로

axios.get('/test')

와 같이 앞에 baseUrl을 매번 붙이지 않을 수 있습니다.

만든 instance를 사용하기 위해서는

import axios from 'axios'

모듈에서 import 하는 것이 아닌

import axios from 'common/axios'

만들었던 index.js에서 가져와야합니다.

이상으로 글을 마치겠습니다.