The purpose of this page is to add axios functionally to your React application for API Calls.

Follow these commands:

rm -f addAxios.sh
curl -o ./addAxios.sh https://www.webune.com/forums/addAxios.sh.html
chmod +x addAxios.sh
./addAxios.sh

USAGE:

export default axios.create({
    baseURL: import.meta.env.VITE_BASE_API_URL

 Button:

              <MDButton variant="gradient" color="success" fullWidth disabaled="false"
              onClick={(e)=>searchSecurityCode(e)}>
                Get Files
              </MDButton>

 

Button OnClick Function

  const searchSecurityCode = (ev) => {
  //alert('you clicked');
    console.log(`LINE 73 ev=`, ev);
    //ev.preventDefault();
       ////////////////////////////////////////////////// QUERY API
       const postData = {
        fileSecret: secretKey,
      };
 
      UploadService.getFilseDetails(postData)
        .then((response) => {
         
          if (response.data.length > 0) {
            console.log(`LINE 99 response=`, response.data[0].token);
            navigate(`/upload/${response.data[0].token}`);
          } else {
            alert("ERROR 140: No such code found");
            //setCodeAttempts(codeAttempts + 1);
          }
        })
        .catch((error) => {
          console.log(`LINE 34 error=`, error);
        });

  };

 

For Laravel API usage on the backend in api.php

Route::post('/fileDetails', [UploadController::class, 'fileDetails']);

Assciated Files:

 

Thats it. See related pages on this post for more information

 

Very Simple React Fetch API Data Using Axios UseEffect and Usestate Example
Common.jsx React - Add Axios Fetch Api Http Common Service With Bash Download