Ever thought of creating a common API handler function in react js or react native which will handle all the API requests coming from components, actions or redux sagas, etc.
Even I have faced issues in handling multiple API requests coming from various places which becomes cumbersome at some time, writing API calls in multiple places is not a standard. All the common API request parameters or methods should be placed at one place which becomes easier to manage when the application grows a larger scale.
Benefits of writing a common API handler
- Single place to manage
- Less coding conflicts
- Standard way
Let's see how we can create a common method for API requests :
Create an api.js file
in the helpers' folder, if the helpers folder
does not exist create one inside your main project directory.
Install the Axios plugin
and import axios in the api.js file.
Add the below code in the api.js file
import axios from 'axios'
let bearerToken
export default async function request(method, url, params, noauth) {
const body = method === 'get' ? 'params' : 'data'
const config = {
method,
url,
baseURL: 'API_URL_HERE',
[body]: params || {}
}
if (!noauth) {
if (!bearerToken) {
const jwt = // get the jwt token
if (jwt) bearerToken = 'Bearer ' + jwt
}
if(bearerToken) {
config.headers = {
Authorization: bearerToken
}
}
}
// console.log(axios)
return axios.request(config)
}
Replace API_URL_HERE
with your base API URL
like www.google.com
Now we need to call this API handler in some place, that place can be anywhere where you want to manage your API calls and its returning data.
Let's see how to call the API handler in the redux-saga for login functionality
import api from '../../helpers/api'
function loginToApi() {
return api('post','/login', {email:'testuser', password:'testtest'}, true)
.then(logIt)
.catch(catchIt)
}
The /login
parameter in the above function is the next part of the api url, now the whole api url will be www.google.com/login
The above function can be called in the generator function like below:
import { call, take } from 'redux-saga/effects'
import { types } from '../modules/identity'
export function* identitySaga() {
while (true) {
const { credentials } = yield take(types.login)
try {
const response = yield call(loginToApi, credentials)
if(response){
console.log("Manage your response here")
}
}
catch (err) {
console.log(err)
}
}
}
The API handler can be used any other place also, it depends on you how you want to use it.
In this article, you have got to know how to create a common API handler which reduces a lot of code and gives more readability. If you find any kind issue please do inform.