We want to hear from you!Take our 2021 Community Survey!
This site is no longer updated.Go to react.dev

AJAX و APIs

كيف يمكنني إجراء استدعاء بواسطة AJAX؟

بإمكانك استخدام أي مكتبة AJAX تريدها مع React. من المكتبات الشائعة هنالك Axios ،jQuery AJAX، والمكتبة المُضمَّنة مع المتصفح والتي تُدعى window.fetch.

في أي تابع من توابع دورة الحياة يجب عليّ إجراء استدعاء AJAX؟

يجب عليك الحصول على البيانات عن طريق استدعاء AJAX في تابع دور الحياة componentDidMount. وهذا لكي تستطيع استخدام التابع setState لتحديث مكوّنك عند استقبال البيانات.

مثال: استخدام نتائج AJAX لتعيين الحالة المحلية

يُوضّح المكوّن التالي كيفيّة إجراء استدعاء AJAX ضمن التابع componentDidMount لتعيين الحالة المحليّة للمكوّن.

تُعيد واجهة برمجة التطبيق في هذا المثال كائن JSON مشابه لما يلي:

{
  "items": [
    { "id": 1, "name": "Apples",  "price": "$2" },
    { "id": 2, "name": "Peaches", "price": "$5" }
  ] 
}
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      items: []
    };
  }

  componentDidMount() {
    fetch("https://api.example.com/items")
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result.items
          });
        },
       	// ملاحظة: من المهم التعامل مع الأخطاء هنا
        // catch() بدلًا من من استخدام الكتلة 
        // لكي لا نقبل الاستثناءات من أخطاء فعليّة في المكوّنات
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  render() {
    const { error, isLoaded, items } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        <ul>
          {items.map(item => (
            <li key={item.id}>
              {item.name} {item.price}
            </li>
          ))}
        </ul>
      );
    }
  }
}

هذا المثال المطابق باستعمال الـ Hooks:

function MyComponent() {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);

  // ملاحظة: تعني المصفوفة الفارغة []
  // سيتم تشغيل useEffect مرة واحدة
  // بطريقة مشابه لـ componentDidMount
  useEffect(() => {
    fetch("https://api.example.com/items")
      .then(res => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result);
        },
       	// ملاحظة: من المهم التعامل مع الأخطاء هنا
        // catch() بدلًا من من استخدام الكتلة 
        // لكي لا نقبل الاستثناءات من أخطاء فعليّة في المكوّنات
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      )
  }, [])

  if (error) {
    return <div>Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div>Loading...</div>;
  } else {
    return (
      <ul>
        {items.map(item => (
          <li key={item.id}>
            {item.name} {item.price}
          </li>
        ))}
      </ul>
    );
  }
}
Is this page useful?تحرير هذه الصفحة