Use axios as better practice in ReactJS

in this post i explain use axios as in ReactJS as better practice.you all kown very well axios handle http request in single promise.

Use axios as http

import axios from ‘axios’;

export let URL=”http://localhost:5000/api/v1″;
export let…


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Sandeep

in this post i explain use axios as in ReactJS as better practice.you all kown very well axios handle http request in single promise.

Use axios as http 

import axios from 'axios';

export let URL="http://localhost:5000/api/v1";
export let URL_PROFILE="http://localhost:5000/uploads/avatar/";
export let URL_POST="http://localhost:5000/uploads/posts/";
export let AUTH_TOKEN=localStorage.getItem('token')||'';

axios.defaults.baseURL = URL;
axios.defaults.headers.common['x-auth-token'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';


export const http=axios;

and use http in your services like

import { http, URL } from "./http.service";
import { errorHandler } from "./error.service";

export const getAllTags=async ()=>{
    try {
        let resp=await http.get(URL+'/tag/all/tags')
        return resp;
    } catch (error) {
        errorHandler(error)
    }
}

it is better practice to use axios in your application
and when you change your default token like this

import { http} from "./http.service";
export const setToken=(token)=>{
  axios.defaults.headers.common['x-auth-token'] = token;
}

use error handler 

import { toast } from "react-toastify"

export const errorHandler=(error)=>{
   if(error.message==="Network Error" && error.status===500){
        toast.error(error.message)
   }
   toast.error(error?.response?.data?.message)
}

I think you better understanding of axios better practice to use. thank you.


This content originally appeared on DEV Community 👩‍💻👨‍💻 and was authored by Sandeep


Print Share Comment Cite Upload Translate Updates
APA

Sandeep | Sciencx (2023-02-14T03:40:56+00:00) Use axios as better practice in ReactJS. Retrieved from https://www.scien.cx/2023/02/14/use-axios-as-better-practice-in-reactjs/

MLA
" » Use axios as better practice in ReactJS." Sandeep | Sciencx - Tuesday February 14, 2023, https://www.scien.cx/2023/02/14/use-axios-as-better-practice-in-reactjs/
HARVARD
Sandeep | Sciencx Tuesday February 14, 2023 » Use axios as better practice in ReactJS., viewed ,<https://www.scien.cx/2023/02/14/use-axios-as-better-practice-in-reactjs/>
VANCOUVER
Sandeep | Sciencx - » Use axios as better practice in ReactJS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2023/02/14/use-axios-as-better-practice-in-reactjs/
CHICAGO
" » Use axios as better practice in ReactJS." Sandeep | Sciencx - Accessed . https://www.scien.cx/2023/02/14/use-axios-as-better-practice-in-reactjs/
IEEE
" » Use axios as better practice in ReactJS." Sandeep | Sciencx [Online]. Available: https://www.scien.cx/2023/02/14/use-axios-as-better-practice-in-reactjs/. [Accessed: ]
rf:citation
» Use axios as better practice in ReactJS | Sandeep | Sciencx | https://www.scien.cx/2023/02/14/use-axios-as-better-practice-in-reactjs/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts