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

یکی از کتابخونه هایی که در 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 ها به HOC

import 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 رو ایمپورت و ازش استفاده کنیم.