AJAX ו-APIs

איך אני יכול ליצור בקשת ?AJAX

אתה יכול להשתמש בכל ספריית AJAX שבחר עם React. כמה פופלאריות הן Axios, jQuery AJAX והמובנית בדפדפן window.fetch.

איפה במחזור החיים של הקומפוננטה אני צריך ליצור בקשת AJAX?

אתה צריך לאכלס נתונים ובקשות AJAX במתודה componentDidMount במחזור החיים. זה בשביל שתוכל להשתמש ב-setState כדי לעדכן את הקומפוננטה שלך מתי שהנתונים חוזרים.

דוגמא: שימוש כתוצאה מ-AJAX כדי להגדיר state מקומי

הקומפוננטה למטה מדגימה איך ליצור בקשת AJAX ב-componentDidMount לאכלס state מקומי בקומפוננטה.

דוגמת ה-API מחזירה אובייקט 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.name}>
              {item.name} {item.price}
            </li>
          ))}
        </ul>
      );
    }
  }
}