react-native HTTP Requests Http with axios
Example
Configure
For web request you can also use library axios.
It's easy to configure. For this purpose you can create file axios.js for example:
import * as axios from 'axios';
var instance = axios.create();
instance.defaults.baseURL = serverURL;
instance.defaults.timeout = 20000;]
//...
//and other options
export { instance as default };
and then use it in any file you want.
Requests
To avoid using pattern 'Swiss knife' for every service on your backend you can create separate file with methods for this within folder for integration functionality:
import axios from '../axios';
import {
errorHandling
} from '../common';
const UserService = {
getCallToAction() {
return axios.get('api/user/dosomething').then(response => response.data)
.catch(errorHandling);
},
}
export default UserService;
Testing
There is a special lib for testing axios: axios-mock-adapter.
With this lib you can set to axios any responce you want for testing it. Also you can configure some special errors for your axois'es methods. You can add it to your axios.js file created in prevous step:
import MockAdapter from 'axios-mock-adapter';
var mock = new MockAdapter(instance);
mock.onAny().reply(500);
for example.
Redux Store
Sometimes you need to add to headers authorize token, that you probably store in your redux store.
In this case you'll need another file, interceptors.js with this function:
export function getAuthToken(storeContainer) {
return config => {
let store = storeContainer.getState();
config.headers['Authorization'] = store.user.accessToken;
return config;
};
}
Next in constructor of your root component you can add this:
axios.interceptors.request.use(getAuthToken(this.state.store));
and then all your requests will be followed with your authorization token.
As you can see axios is very simple, configurable and useful library for applications based on react-native.
