AJAX və API-lar

AJAX çağırış nə cür edə bilərəm?

React ilə istədiyiniz Ajax kitabxanasını işlədə bilərsiniz. Populyar kitabxanalar: Axios, jQuery AJAX, və brauzerə qurulmuş window.fetch.

Komponent yaşama tsiklinin harasında Ajax çağırışları etməliyəm?

Ajax çağırışdan gələn bütün məlumatları componentDidMount yaşama tsikli funskiyasından tətbiq etməlisiniz. Bunun səbəbi, məlumat alındıqda setState ilə komponenti yeniləməkdən imkanının olmasıdır.

Nümunə: AJAX nəticələrinin lokal veziyyətə yazılması

Aşağıdakı komponent componentDidMountdan Ajax çağırış edib lokal komponent vəziyyətinin doldurulmasını göstərir.

Nümunə API belə bir JSON obyekt göndərir:

{
  "items": [
    { "id": 1, "name": "Almalar",  "price": "2 AZN" },
    { "id": 2, "name": "Şəftəlilər", "price": "5 AZN" }
  ] 
}
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
          });
        },
        // Qeyd: komponentlərdə olan aktual xətaları udmamaq üçün
        // AJAX xetəlarını `catch()` blokunda tutmaq əvəzinə burda
        // tutmaq daha vacibdir.
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
  }

  render() {
    const { error, isLoaded, items } = this.state;
    if (error) {
      return <div>Xəta: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Yüklənir...</div>;
    } else {
      return (
        <ul>
          {items.map(item => (
            <li key={item.name}>
              {item.name} {item.price}
            </li>
          ))}
        </ul>
      );
    }
  }
}