اذهب إلى المحتوى
  • 0

تعطيل الطلب السابق للخادم عندما تتغير الصفحة ب react -router

Rayden Storm

السؤال

عند زيارة الصفحة التي  تحتوي هذا المكون 

import React from 'react';
import axios from 'axios';

export default function test() {
  const [data, setData] = useState(null);
  useEffect(() => {
    axios
      .get(endpoint)
      .then((res) => {
        setData(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  }, [input]);
  return (
    <div>
      {data &&
        data.map((post) => (
          <div>
            <img src={post.image} alt="" />
            <h1>{post.title}</h1>
          </div>
        ))}
    </div>
  );
}

ينطلق الطلب الى الخادم ويجلب ال posts بصورهم والصور عند الدخول الى ال network في أدوات الطور في المتصفح يكونون pending ثم يحملون واحدة تلو الأخرى المشكلة عندما أذهب الى صفحة أخرى تحتوي على طلب مماثل للخادم أجد ان الطلب السابق في ال network مازال يحمل الصور المتعلقة بالطلب السابق وهذا ينتج عنه ثقل في جلب المحتوي المتعلق بالصفحة الجديدة التي انتقلت لها وأحاول ايجاد طريقة بحيث عند استخدام react-router-dom للانتقال الى صفحة أخرى أقوم بتعطيل الطلب السابق للخادم.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1

يمكنك عمله عن طريق

  1. تعيين cancelToken عند الدخول للcomponent
  2. تمرير ال cancelToken لل request عن طريق ال options object
  3. عند الخروج من المكون تقوم بإلغاء ال request عن طريق ال cancelToken
    import React from 'react';
    import axios from 'axios';
    
    
    
    export default function test() {
      const [data, setData] = useState(null);
      
      const source = useMemo(() => axios.CancelToken.source(), [axios]); //CancelToken هنا تقوم بتعريف 
      
      useEffect(() => {
        axios
          .get(endpoint, { cancelToken: source.token }) // نقوم بإعطائه للطلب
          .then((res) => {
            setData(res.data);
          })
          .catch((err) => {
            console.log(err);
          });
        
        return () => { // عند الخروج نقوم باستدعائه
          if (source) {
            source.cancel("تم إلغاء الطلب");
          }
        }
      }, [input]);
      return (
        <div>
          {data &&
            data.map((post) => (
              <div>
                <img src={post.image} alt="" />
                <h1>{post.title}</h1>
              </div>
            ))}
        </div>
      );
    }

     

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...