AJAX dan API

Bagaimana cara membuat panggilan AJAX?

Anda bisa menggunakan library AJAX apa saja yang anda inginkan dengan React. Beberapa yang populer yaitu Axios, jQuery AJAX, dan window.fetch bawaan browser.

Pada lifecycle komponen mana seharusnya membuat panggilan AJAX?

Anda sebaiknya mengisi data melalui panggilan AJAX pada lifecycle method componentDidMount. Dengan begitu Anda dapat menggunakan setState untuk memperbarui komponen Anda ketika data telah diterima.

Contoh: Menggunakan hasil AJAX untuk mengisi state lokal

Komponen dibawah menunjukkan cara menggunakan panggilan AJAX pada componentDidMount untuk mengisi state komponen lokal.

Contoh API dibawah ini menghasilkan objek JSON sebagai berikut:

{
  "items": [
    { "id": 1, "nama": "apel",  "harga": "$2" },
    { "id": 2, "nama": "pear", "harga": "$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
          });
        },
        // Catatan: sangatlah penting untuk mengatasi error disini
        // daripada menggunakan blok catch() sehingga kita tidak menenggelamkan
        // exception dari bug yang sebenarnya terjadi di komponen
        (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.nama}>
              {item.nama} {item.harga}
            </li>
          ))}
        </ul>
      );
    }
  }
}