نوشتن HOC برای مدیریت کردن Error های axios در React

hoc for error handling یکی از کتابخونه هایی که در React زیاد باهاش کار میکنم و خیلی هم دوست داشتنیه، عالیجناب axios نام داره.اگر بخوام این کتابخونه رو معرفی کنم فکر کنم بهترین تعریف رو میتونم از صفحه github این کتابخونه کپی کنم و اینجا بزارم:Promise based HTTP client for the browser and node.jsدرخواست هایی که ما به سرور میزنیم همیشه مطابق میل ما عمل نمیکنه و گاهی اوقات با مشکلاتی روبرو میشه و ما باید با یک پیغام کاربر رو از مشکل به وجود اومده مطلع کنیم تا بدونه که مشکل از سمت ما هست.اینکه کاربر رو از این امر مطلع نکنیم از لحاظ UX اصلا خوب نیست و تجربه خوبی رو به کاربر منتقل نمیکنه.به لطف ویژگی Intercept request and response که axios در اختیار ما قرار میده میتونیم یک HOC برای handle کردن خطاها بنویسیم و در هر کامپوننتی که نیازش داشتیم استفاده کنیم.فکر کنم تا همینجا زیاد صحبت کردم.بریم سراغ کد نویسی و شروع کار اصلی:در ابتدای امر یک کامپوننت به نام ErrorHandler تعریف میکنیم:import React,{useState,useEffect} from 'react'; const ErrorHandler=(WrappedComponent)=>{ return(props)=>{ return( <WrappedComponent {...props} /> ) } } export default ErrorHandler; در اینجا {props...} برای اینکه کامپوننتی که wrap شده props هاش از دست نره.قراره که ما پیغام خطاها رو در یک Modal به کاربر نمایش بدیم.پس باید یه همچین کامپوننتی رو بسازیم.چون ساختش کار خاصی نداره،خودتون اینکار رو بکنید.من فقط اینجا ایمپورتش میکنم.همچنین از React.Fragment استفاده میکنم چون JSX بهمون گیر میده اگر اینکار رو نکنیمimport React,{useState,useEffect} from 'react'; import Modal from '../UI/Modal/Modal'; const ErrorHandler=(WrappedComponent)=>{ return(props)=>{ return( <React.Fragment> <Modal show={show} > یک چیزی اشتباهه </Modal> <WrappedComponent {...props} /> </React.Fragment> ) } } export default ErrorHandler; حالا اون رو در کامپوننتی که لازم داریم ایمپورتش میکنیم و ازش استفاده میکنیمimport ErrorHandler from '../components/hoc/errorHandler'; export default ErrorHandler(HomePage);در اینجا اسم کامپوننت ما HomePage هست که قراره از HOC برای این کامپوننت استفاده کنیم.الان در خروجی روی صفحه ما یک Modal رو داریم که داخلش نوشته شده " یک چیزی اشتباه".تا اینجا یک HOC خیلی ساده نوشتیم که هیچ کار خاصی رو انجام نمیده.چون از Hooks استفاده میکنیم،باید به جای return(props) از یک function استفاده کنیمimport React,{useState,useEffect} from 'react'; import Modal from '../UI/Modal/Modal'; const ErrorHandler=(WrappedComponent)=>{ const withHookErrorHandler=(props)=>{ const [show,setShow] = useState(false); return( <React.Fragment> <Modal show={show} > یک چیزی اشتباهه </Modal> <WrappedComponent {...props} /> </React.Fragment> ) } } export default ErrorHandler;در واقع ما show رو که یک state هست برای نمایش یا عدم نمایش Modal استفاده میشه.قرار بر این بود که از ویژگی Intercept استفاده کنیم پس در فایل HomePage ما باید axios رو برای HOC بفرستیمexport default ErrorHandler(HomePage,axios);حالا نوبت میرسه به اضافه کردن interceprators ها به HOCimport React,{useState,useEffect} from 'react'; import Modal from '../UI/Modal/Modal'; const ErrorHandler=(WrappedComponent,axios)=>{ const withHookErrorHandler = (props)=>{ const [show,setShow] = useState(false); axios.interceptors.request.use(req => { setShow(false); return req; }); axios.interceptors.response.use(res => res, error => { setShow(true); console.log(error) }); const errorConfirmHandler=()=>{ setShow(false) } return( <React.Fragment> <Modal show={show} modalClosed={errorConfirmHandler} > یک چیزی اشتباهه </Modal> <WrappedComponent {...props} /> </React.Fragment> ); } return withHookErrorHandler } export default ErrorHandler;توجه کنید که در .interceptors.request باید حتما return req قرار بگیره وگرنه تمامی request های ما رو بلاک میکنه و هیچ درخواستی فرستاده نمیشه.در interceptors.response در صورت وجود error ما مقدار show رو برابر با true میزاریم تا Modal نمایش داده بشه.در اینجا ما فقط یک پیغام ثابت رو داریم و اون هم عبارت "یک چیزی اشتباه".میتونیم یک errorState تعریف کنیم و زمانی که در reponse دریافتی error داشتیم errorState رو برابر با همین error قرار بدیم.به همین راحتی میتونیم در هرکامپوننتی که نیاز داریم،این HOC رو ایمپورت و ازش استفاده کنیم.