DEV Community

loading...

Axios Api Call Wrapper with redux saga

ajmal_hasan profile image Ajmal Hasan ・1 min read

serviceUrl.js

const baseURL = 'https://jsonplaceholder.typicode.com/'
export const serviceUrl = {
    baseURL: baseURL,
    user: "posts",
}
Enter fullscreen mode Exit fullscreen mode

axiosApiCallWrapper.js

import axios from 'axios'
import { serviceUrl } from '../constants/constants'
import AsyncStorage from '@react-native-async-storage/async-storage';

/**
 * Create an Axios Client with defaults
 */

const getToken = async () => await AsyncStorage.getItem("access-token")

const client = axios.create({
    baseURL: serviceUrl.baseURL,
    // auth: { Authorization: 'Bearer ' + { getToken } }
});

/**
* Request Wrapper with default success/error actions
*/
export const apiCall = function (method, route, body = null, token = null) {

    const onSuccess = function (response) {
        console.debug('Request Successful!', response);
        return response.data;
    }

    const onError = function (error) {
        console.error('Request Failed:', error.config);

        if (error.response) {
            // Request was made but server responded with something
            // other than 2xx
            console.error('Status:', error.response.status);
            console.error('Data:', error.response.data);
            console.error('Headers:', error.response.headers);

        } else {
            // Something else happened while setting up the request
            // triggered the error
            console.error('Error Message:', error.message);
        }

        return Promise.reject(error.response || error.message);
    }

    return client({
        method,
        url: route,
        data: body
    }).then(onSuccess)
        .catch(onError);
}
Enter fullscreen mode Exit fullscreen mode

Usage from Redux Saga:
saga.js

import { apiCall } from '../../util/axiosApiCallWrapper'
import { serviceUrl } from '../../constants/constants';

function* getUsers(value) {
    try {

        let response1 = yield call(apiCall, "GET", serviceUrl.user)//Get request
        let response2 = yield call(apiCall, "POST", serviceUrl.user, {
            title: 'foo',
            body: 'bar',
            userId: 1,
        })  //post request
        console.log('loginGenobject', response1, response2)
    } catch (error) {
        console.log(error);
    }
}
Enter fullscreen mode Exit fullscreen mode

Usage from plain javascript file:
GetUsers.js

const myFun = token => {
    return apiCall({
      url: "/path/to",
      method: "GET",
      config: {
        Authorization: `Bearer ${token}`
      }
    });
  };

apiCall({
    method: 'get',
    url: 'posts',
}).then((resp) => {
    console.log('resp', resp);
})

apiCall({
    method: 'POST',
    url: 'posts',
    data: {
        title: 'foo',
        body: 'bar',
        userId: 1,
    }
}).then((resp) => {
    console.log('resp', resp);
})
Enter fullscreen mode Exit fullscreen mode

Discussion (0)

pic
Editor guide