[React Native] 네트워크 처리 - axios
Nadan Dev Blog
1) axios, fetch 비교
내장 api로 fetch를 사용해도 되지만 axios를 활용하면 기본 에러처리 등 추가해줘야 하는 네트워크 처리를 편하게 사용할 수 있음.
2) 설치
특별히 추가해야 할 것 없음
npm install axios
3) api config 설정
api는 따로 폴더를 만들어준다. src > api > **Api.js
다음처럼 axios는 create를 호출하면 axios를 다시 리턴해줘서 필요한 곳에서 import 후 바로 api 호출 가능하다.
import axios from 'axios';
export default axios.create({
baseURL: 'https://api.yelp.com/v3/businesses',
headers: {
Authorization: 'Bearer 키값'
}
});request, response를 intercept 할 수도 있다. 토큰을 사용하는 경우 context에서 일일이 하지 않고 axios 설정에서 interceptor를 통해 토큰을 확인할 수 있다.
import axios from 'axios';
import { AsyncStorage } from 'react-native';
const axios = axios.create({
baseURL: 'http://3f607ddb.ngrok.io'
});
axios.interceptors.request.use(
// before fetch
async (config) => {
const token = await AsyncStorage.getItem('token');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
return config;
},
// error case
(err) => {
return Promise.reject(err)
}
);
export default instance;4) api 호출
import centerAPI from '../api/centerApi';
const centerReducer = (state, action) => {
switch (action.type) {
default:
return state;
};
};
const createCenter = dispatch => async (center) => {
await centerAPI.post('/center', { center });
};