https://github.com/huseyincorakli/custom-axios-service-for-react

https://github.com/huseyincorakli/custom-axios-service-for-react

Last synced: 8 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/huseyincorakli/custom-axios-service-for-react
• Owner: huseyincorakli
• Created: 2023-08-28T10:21:05.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-08-28T10:25:46.000Z (over 1 year ago)
• Last Synced: 2024-04-08T17:12:49.950Z (10 months ago)
• Language: TypeScript
• Size: 53.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        

## HttpClientService.ts

```jsx

     import axios, { AxiosHeaders } from 'axios'

   export class RequestParameters {

       controller?: string;

       action?: string;

       queryString?: string;

       headers?: AxiosHeaders;

       baseUrl?: string;

       fullEndPoint?: string

   }

   

   

   export const HttpClientService = {

       

       url(requestParameters: Partial): string {

           const mainUrl :string='https://jsonplaceholder.typicode.com';

           return `${requestParameters.baseUrl ? requestParameters.baseUrl : mainUrl}/${requestParameters.controller}${requestParameters.action ? `/${requestParameters.action}` : ""}`;

       },

   

       async get(requestParameters: Partial, id?: string) {

           let url: string = '';

           if (requestParameters.fullEndPoint) {

               url = requestParameters.fullEndPoint

           }

           else {

               url = `${this.url(requestParameters)}${id ? `?id=${id}` : ''}${requestParameters.queryString ? `/${requestParameters.queryString}` : ''}`;

               return  (await axios.get(url, { headers: requestParameters.headers }))

           }

       }

       //post()

       //put()

       //delete()

      

   } 

```

## HttpUserService.ts

```jsx

      import { HttpClientService } from "../httpClientService";

   

   

   interface Response {

       data:Data;

       status:number;

     }

     interface Data {

       products:T[]

     }

   

     

   export const HttpUserService={

       async read(  setState:React.Dispatch>,callBack?:()=>void){

           await HttpClientService.get>({

                controller:'todos'

            }).then(response=>{

               //check in case of response (status code , status text)

               

               setState(response.data);

                

            }).catch(err=>{

               // check in case of error

               alert(err.message);

              

            })

            if(callBack!=undefined){

                callBack();

            }

        },

   }

```

## App.tsx

```jsx

   import { useEffect, useState } from "react"

   import { HttpUserService } from "./http/http-user/httpUserService"

   

   

   function App() {

   const [user,setUser]=useState([]);

     useEffect(()=>{

       HttpUserService.read(setUser,()=>{

         //Let's say we have added users, we can call a method that will load users again from here

         //or assuming we use a spinner, here the spinner can be deactivated

       })

     },[])

     return (

       <>

         {user? user[0]?.id:'null'}

       >

     )

   }

   

   export default App

```