Use Axios with React Hooks for Async-Await Requests
55.5 هزار بار بازدید -
2 سال پیش
-
Web Dev Roadmap for Beginners
Web Dev Roadmap for Beginners (Free!): https://bit.ly/DaveGrayWebDevRoadmap
Learn how to use Axios with React hooks for async / await requests. In this tutorial, we will create two custom React hooks with Axios. These Axios hooks will return both data and functions to help complete all CRUD operations.
💖 Support me on Patreon ➜ Patreon: davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Advanced React: https://bit.ly/AdvReactDev
- Jr to Senior Web Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
- Master FAANG Coding Interviews: https://bit.ly/FAANGInterview
🚩 Subscribe ➜ https://bit.ly/3nGHmNn
🚀 React JS for Beginners full course - 9 hours: React JS Full Course for Beginners | ...
📬 Course Updates ➜ https://courses.davegray.codes/
🔗 Source Code: https://github.com/gitdagray/react_ho...
Use Axios with React Hooks for Async-Await Requests
(00:00) Intro
(00:41) Welcome
(00:54) Install Axios
(01:38) useAxios hook
(03:14) Request Config
(04:02) useAxios continued
(05:23) AbortController - not isMounted
(06:19) useAxios completed
(09:33) Create an Axios instance
(11:00) Joke component
(16:25) Testing useAxios
(16:52) Add refetch to useAxios
(19:49) Testing refetch
(20:13) useAxios vs useAxiosFunction
(20:54) useAxiosFunction
(25:08) Create a 2nd Axios instance
(25:43) Posts component
(33:45) Quick debug
(34:41) Testing useAxiosFunction
☕ Buy Me A Coffee: https://www.buymeacoffee.com/davegray
📚 Tutorial References:
Stop Checking If Your React Component is Mounted: Medium: react-stop-checking-if-your-component-is-mounted
Axios Request Config Docs: https://axios-http.com/docs/req_config
🔗 ES7 React JS Snippets Extension for VS Code:
https://marketplace.visualstudio.com/...
🔗 React Dev Tools Extension for Chrome:
https://chrome.google.com/webstore/de...
📚 General React References:
ReactJS Official site: https://reactjs.org/
React Wikipedia: https://en.wikipedia.org/wiki/React_(...)
React Jobs: https://www.ziprecruiter.com/candidat...
✅ Follow Me:
Github: https://github.com/gitdagray
Twitter: Twitter: yesdavidgray
LinkedIn: LinkedIn: davidagray
Blog: https://yesdavidgray.com
Reddit: Reddit: DaveOnEleven
Was this tutorial about creating custom React hooks with Axios helpful? If so, please share. Let me know your thoughts in the comments.
#axios #react #hooks
Learn how to use Axios with React hooks for async / await requests. In this tutorial, we will create two custom React hooks with Axios. These Axios hooks will return both data and functions to help complete all CRUD operations.
💖 Support me on Patreon ➜ Patreon: davegray
⭐ Become a full-stack web dev with Zero To Mastery Courses:
- Advanced React: https://bit.ly/AdvReactDev
- Jr to Senior Web Dev Roadmap: https://bit.ly/WebDevRoadmap-JrtoSr
- Master FAANG Coding Interviews: https://bit.ly/FAANGInterview
🚩 Subscribe ➜ https://bit.ly/3nGHmNn
🚀 React JS for Beginners full course - 9 hours: React JS Full Course for Beginners | ...
📬 Course Updates ➜ https://courses.davegray.codes/
🔗 Source Code: https://github.com/gitdagray/react_ho...
Use Axios with React Hooks for Async-Await Requests
(00:00) Intro
(00:41) Welcome
(00:54) Install Axios
(01:38) useAxios hook
(03:14) Request Config
(04:02) useAxios continued
(05:23) AbortController - not isMounted
(06:19) useAxios completed
(09:33) Create an Axios instance
(11:00) Joke component
(16:25) Testing useAxios
(16:52) Add refetch to useAxios
(19:49) Testing refetch
(20:13) useAxios vs useAxiosFunction
(20:54) useAxiosFunction
(25:08) Create a 2nd Axios instance
(25:43) Posts component
(33:45) Quick debug
(34:41) Testing useAxiosFunction
☕ Buy Me A Coffee: https://www.buymeacoffee.com/davegray
📚 Tutorial References:
Stop Checking If Your React Component is Mounted: Medium: react-stop-checking-if-your-component-is-mounted
Axios Request Config Docs: https://axios-http.com/docs/req_config
🔗 ES7 React JS Snippets Extension for VS Code:
https://marketplace.visualstudio.com/...
🔗 React Dev Tools Extension for Chrome:
https://chrome.google.com/webstore/de...
📚 General React References:
ReactJS Official site: https://reactjs.org/
React Wikipedia: https://en.wikipedia.org/wiki/React_(...)
React Jobs: https://www.ziprecruiter.com/candidat...
✅ Follow Me:
Github: https://github.com/gitdagray
Twitter: Twitter: yesdavidgray
LinkedIn: LinkedIn: davidagray
Blog: https://yesdavidgray.com
Reddit: Reddit: DaveOnEleven
Was this tutorial about creating custom React hooks with Axios helpful? If so, please share. Let me know your thoughts in the comments.
#axios #react #hooks
2 سال پیش
در تاریخ 1400/12/06 منتشر شده
است.
55,500
بـار بازدید شده