Add Axios Interceptor in Services where Api is called

 Create Services folder in src

Create Api Folder and create index.js

import { url } from "../BaseURL";
import axiosApiInstance from "../Interceptor";

const outGetRegRegbasic = async (data) => {
  return await axiosApiInstance.post(`${url}api/his7/reg/websrv/outGetRegRegbasic`, data)
}

export const _services = {
  outGetRegRegbasic ,
};

Create url Folder  and create index.js

export const url = 'http://35.234.63.118:30000/'


Create Interceptor folder  and create index.js

import axios from 'axios'

const axiosApiInstance = axios.create({});


// Request interceptor for API calls
axiosApiInstance.interceptors.request.use(
    async config => {
        config.headers = {
            'Access-Control-Allow-Origin': '*',
            // 'Authorization': `Bearer ${store.getState()?.counter?.token}`,
           // 'Authorization': `Bearer eyJhbGciOiJodHRwOi8vd3d3LnczLm9yZy8yMDAxLzA0L3htbGRzaWctbW9yZSNobWFjLXNoYTUxMiIsInR5cCI6IkpXVCIsImN0eSI6IkpXVCJ9.eyJjbGllbnRpZCI6Im1hc2hyZXEiLCJuYmYiOjE2NTUxMTk2NzMsImV4cCI6MTY1NTEyMzI3M30`,
            'Content-Type': 'application/json'
        }
        return config;
    },
    error => {
        Promise.reject(error)
    });

// Response interceptor for API calls
axiosApiInstance.interceptors.response.use((response) => {
    return response
}, async function (error) {
    const originalRequest = error.config;
    if (error.response.status === 403 && !originalRequest._retry) {
        originalRequest._retry = true;
        axios.defaults.headers.common['Authorization'] = 'Bearer ' + 'token';
        return axiosApiInstance(originalRequest);
    }
    return Promise.reject(error);
});

export default axiosApiInstance

import in views

import { _services } from './../../../../Services/Api/index'


Comments

Post a Comment

Popular posts from this blog

Simple Redux

 Create Redux Folder Create Reducers Folder. -->. create index.php import { createSlice } from '@reduxjs/toolkit' const initialState = { userToken : { access_token : '' }, userDes : [{ token : "QpwL5tke4Pnpja7X4" , disclaimer : 'sdsd' }], loading : true , error : null } export const eveReducer = createSlice ({ initialState , name : 'eveReducer' , reducers : { AuthToken : ( state = initialState , action ) => { state . userToken = action . payload }, UserDisclaimer : ( state = initialState , action ) => { state . userDes = action . payload }, logout : ( state = initialState , action ) => { state . userToken = {}, state . userData = {} }, }, }) export const { AuthToken , UserDisclaimer , logout } = eveReducer . actions export default eveReducer . reducer Create Store Folder. -...
Read more

React Interview Questions

Replace array value in javascript var users = [ { id : 1 , firstname : 'John' , lastname : 'Ken' }, { id : 2 , firstname : 'Robin' , lastname : 'Hood' }, { id : 3 , firstname : 'William' , lastname : 'Cook' } ]; var editedUser = { id : 2 , firstname : 'Michael' , lastname : 'Angelo' }; users = users. map ( u => u. id !== editedUser. id ? u : editedUser); console . log ( 'users -> ' , users); Remove array value in javascript let value = 3 let arr = [ 1 , 2 , 3 , 4 , 5 , 3 ] arr = arr. filter ( item => item !== value) console . log (arr) // [ 1, 2, 4, 5 ] Hooks in react useState, useEffect, useRef, useMemo When to use a Class Component over a Function Component? If the component needs state or lifecycle methods then use class component otherwise use function component.  What is Middleware? arrow function vs normal function ? What is the use of super(props) ? So, the simple answer to thi...
Read more