// in specific api folder export const fetchData = async (params) => { return await axios.get(`/route/${params.id}`) .then(res => res.data) .catch(err => err) } export const postData = async (params) => { return await axios.post(`/route`, {params}) .then(res => console.log(res)) .catch(err => console.log(err.message)) } --------------------------------------//--------------------------------------------- // in component import { fetchData, postData } from './api' const [query, setQuery] = useState() const onEvent = () => { postData( // some data ) } const fetchDataAsync = async() => { try { // data handling const response = await fetchData(); setQuery(response) } catch (err) { // error handling } } // fetch data on component render useEffect(() => { fetchDataAsync() }, [])
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter