تعامل Redux-Saga مع أخطاء fetch()

عند التعامل مع طلبات الشبكة باستخدام مكتبة Redux-Saga، يمكن أن تواجه تحديات في التعامل مع الأخطاء بشكل صحيح. في حالتك، تحاول التعامل مع أخطاء غير مصرح بها (Unauthorized) من الخادم. دعني أوضح لك كيف يمكنك تصحيح الخطأ وتحقيق التوقعات الصحيحة.

أولاً وقبل كل شيء، دعنا نلقي نظرة على السائق (saga) الخاص بك:

javascriptCopy code
function* logIn(action) {
  try {
    const user = yield call(Api.logIn, action);
    yield put({type: types.LOG_IN_SUCCEEDED, user});
  } catch (error) {
    yield put({type: types.LOG_IN_FAILED, error});
  }
}

هذا السائق يبدو في المقام الأول أنه يعمل بشكل جيد، إذ يحاول استدعاء دالة login من مكتبة الـ API ثم يضع النتيجة في حالة الـ Redux المناسبة. ومع ذلك، يجب التحقق من كيفية معالجة الأخطاء داخل دالة الـ API التي تستدعيها هذه السائق.

ثانيًا، لنلقِ نظرة على دالة fetchUser التي تقوم بجلب البيانات:

javascriptCopy code
fetchUser(action) {
  const {username, password} = action.user;
  const body = {username, password};
  return fetch(LOGIN_URL, {
    method,
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(body)
  })
    .then(res => {
      res.json().then(json => {
        if (res.status >= 200 && res.status < 300) {
          return json
        } else {
          throw res
        }
      })
    })
    .catch(error => {throw error});
}

في هذه الدالة، يتم التحقق من حالة الرد (response) من الخادم، وفي حالة كانت ناجحة (status code بين 200 و 300)، يتم إرجاع البيانات كـ JSON. أما في حالة فشل الطلب، يتم رمي الاستثناء وتقديمه كمعطي للدالة الأعلى لتتعامل معه.

المشكلة تكمن هنا، حيث أنك تقوم برمي الاستثناء داخل دالة then، مما يؤدي إلى أنه سيتم التعامل مع الاستثناء في دالة catch الخارجية، وبالتالي لن يتم التقاط الخطأ بواسطة Redux-Saga كما توقعت.

لحل هذه المشكلة، يمكنك تعديل دالة fetchUser كالتالي:

javascriptCopy code
fetchUser(action) {
  const {username, password} = action.user;
  const body = {username, password};
  return fetch(LOGIN_URL, {
    method,
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(body)
  })
    .then(res => {
      if (res.status >= 200 && res.status < 300) {
        return res.json(); // رجوع بنتيجة الـ JSON
      } else {
        throw new Error('Unauthorized'); // رمي الاستثناء في حالة الفشل
      }
    })
    .catch(error => {throw error});
}

بهذا التغيير، ستقوم الدالة الآن برمي استثناء من نوع Error مع النص ‘Unauthorized’ إذا فشل الطلب. هذا يجعل Redux-Saga قادرًا على التقاط الخطأ بشكل صحيح وتنفيذ الإجراء المناسب، مثل إرسال action من نوع LOG_IN_FAILED مع الخطأ الملائم.

باختصار، يجب أن تتأكد من أن الأخطاء تُعالج وفقًا للطريقة التي يتوقعها Redux-Saga. وعادةً ما ينصح برمي الأخطاء باستخدام throw new Error() لضمان التقاطها بشكل صحيح.

بالطبع، دعوني أواصل توضيح كيفية التعامل مع الأخطاء في طلبات fetch() باستخدام Redux-Saga بشكل أكثر تفصيلًا.

عند استخدام Redux-Saga لإدارة الطلبات عبر الشبكة، من المهم فهم كيفية التعامل مع الأخطاء بشكل صحيح. لذلك، دعنا نلقي نظرة أعمق على كيفية تحسين كودك لضمان التعامل السليم مع الأخطاء.

أولاً وقبل كل شيء، دعونا نقوم بتعديل دالة fetchUser لتعيد الاستثناء بشكل مناسب في حالة فشل الطلب:

javascriptCopy code
fetchUser(action) {
  const {username, password} = action.user;
  const body = {username, password};
  return fetch(LOGIN_URL, {
    method,
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(body)
  })
    .then(res => {
      if (res.status >= 200 && res.status < 300) {
        return res.json(); // رجوع بنتيجة الـ JSON
      } else {
        throw new Error('Unauthorized'); // رمي الاستثناء في حالة الفشل
      }
    })
    .catch(error => {throw error});
}

هذا التغيير يجعل الدالة تقوم برمي استثناء من نوع Error مع النص ‘Unauthorized’ إذا فشل الطلب بأي طريقة.

الآن، يمكننا التركيز على كيفية التعامل مع هذا الاستثناء في Redux-Saga. يمكنك تحسين السائق (saga) الخاص بك كما يلي:

javascriptCopy code
function* logIn(action) {
  try {
    const user = yield call(Api.logIn, action);
    yield put({type: types.LOG_IN_SUCCEEDED, user});
  } catch (error) {
    if (error.message === 'Unauthorized') {
      yield put({type: types.LOG_IN_FAILED, error: 'Unauthorized'});
    } else {
      yield put({type: types.LOG_IN_FAILED, error: 'An error occurred'});
    }
  }
}

هنا، بعد التقاط الاستثناء في Redux-Saga، يتم التحقق مما إذا كان الخطأ يحمل رسالة ‘Unauthorized’ أم لا، ويتم تحديد السلوك بناءً على ذلك. في حالة كان الخطأ ‘Unauthorized’، يتم إرسال action من نوع LOG_IN_FAILED مع الخطأ ‘Unauthorized’ المناسب. في حالة كان الخطأ مختلفًا عن ذلك، يمكنك تحديد سلوك آخر مثل إرسال رسالة خطأ عامة.

هذا التحسين يضمن أن تتم معالجة الأخطاء بشكل صحيح وفقًا للسياق المناسب. من الضروري دائمًا التحقق من الأخطاء المتوقعة والتعامل معها بشكل مناسب لتوفير تجربة مستخدم سلسة وفعالة. باستخدام هذه الطريقة، يمكنك تحسين كفاءة تطبيقك وجعله أكثر مرونة وموثوقية في التعامل مع الأخطاء عبر الشبكة.