Cara Menggunakan Async/Await dengan Axios di React

Hallo semuanya, pada tutorial kali ini kita akan belajar bagaimana cara menggunakan async/await dengan axios di react.

Langkah pertama kita perlu menginstall axios terlebih dahulu dengan menggunakan perintah berikut.

npm install --save axios

Kemudian kita buat request get dengan menggunakan axios dari react component kita seperti code dibawah ini.

import React from "react";
import axios from "axios";
export default class App extends React.Component {
    state = {
       users: []
    };
    componentDidMount() {
       this.getUsers();
    }
    getUsers = () => {
       axios
           .get("https://reqres.in/api/users?page=1")
           .then(data => this.setState({ users: data.data.data }))
           .catch(err => {
               console.log(err);
               return null;
           });
    };
    render() {
       return (
           <div>
               {this.state.users.length === 0 ? (
                   <div>Loading...</div>
               ) : (
                   this.state.users.map((e, i) => {
                       return <div key={i}>{e.first_name}</div>;
                    })
               )}
           </div>
       );
     }
}

Kode di atas membuat permintaan untuk https://reqres.in untuk mengambil beberapa pengguna dari API mereka dan menampilkan nama depan pengguna di component kita.

Sekarang, kita ingin membuat request yang sama menggunakan async/await. Untuk menggunakan fungsi await, kita harus membungkus fungsi itu sendiri sebagai fungsi async seperti code berikut ini:

getUsers = async () => {
    let res = await axios.get("https://reqres.in/api/users?page=1");
    let { data } = res.data;
    this.setState({ users: data });
};

Fungsi async berbeda dari fungsi sinkronisasi karena fungsi async tidak memblokir pemrosesan kode di bawahnya. Jika Anda mencoba membuat permintaan POST, cukup berikan parameter sebagai variabel kedua ke dalam Axios:

axios.post('https://yourdomain.com', { name: 'Aditya' })

Selamat, sekarang kita sudah bisa menerapakan async serta await dengan axios di aplikasi react. Jika ada yang ditanyakan silahkan tulis di kolom komentar dibawah ini.