Tutorial

Cara Menggunakan Axios bersama React

Published on December 15, 2020
Bahasa Indonesia
Cara Menggunakan Axios bersama React

Pengantar

Banyak proyek di web yang memerlukan antarmuka dengan REST API di beberapa tahapan pengembangannya. Axios adalah klien HTTP ringan yang berdasarkan layanan $http dalam Angular.js v1.x dan mirip dengan Fetch API JavaScript asli.

Axios berbasis janji, yang memberi Anda kemampuan untuk memanfaatkan async dan await dari JavaScript agar kode yang tidak sinkron lebih mudah dibaca.

Anda juga dapat mencegat dan membatalkan permintaan, dan ada perlindungan bawaan di sisi klien terhadap pemalsuan permintaan lintas situs.

Dalam artikel ini, Anda akan mendalami contoh cara menggunakan Axios untuk mengakses JSON Placeholder API yang populer di dalam aplikasi React.

Prasyarat

Untuk mengikuti artikel ini, Anda akan membutuhkan hal berikut:

Langkah 1 — Menambahkan Axios ke Proyek

Di bagian ini, Anda akan menambahkan Axios ke proyek React digital-ocean-tutorial yang telah Anda buat dengan mengikuti tutorial Cara Menyiapkan Proyek React dengan Create React App.

Untuk menambahkan Axios ke proyek, buka terminal dan ubah direktori ke proyek Anda:

  1. cd digital-ocean-tutorial

Kemudian, jalankan perintah ini untuk menginstal Axios:

  1. npm install axios

Selanjutnya, Anda perlu mengimpor Axios ke dalam berkas tempat Anda ingin menggunakannya.

Langkah 2 — Membuat Permintaan GET

Dalam contoh ini, Anda membuat komponen baru dan mengimpor Axios ke dalamnya untuk mengirimkan permintaan GET.

Di dalam folder src dari proyek React, buat komponen baru bernama PersonList.js:

  1. nano src/PersonList.js

Tambahkan kode berikut ke komponen:

digital-ocean-tutorial/src/PersonList.js
import React from 'react';

import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    persons: []
  }

  componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`)
      .then(res => {
        const persons = res.data;
        this.setState({ persons });
      })
  }

  render() {
    return (
      <ul>
        { this.state.persons.map(person => <li>{person.name}</li>)}
      </ul>
    )
  }
}

Pertama, Anda mengimpor React dan Axios agar keduanya dapat digunakan dalam komponen. Kemudian, Anda kaitkan ke kait siklus hidup componentDidMount dan membuat permintaan GET.

Anda menggunakan axios.get(url) dengan URL dari titik akhir API untuk mendapatkan janji yang akan mengembalikan objek respons. Di dalam objek respons, ada data yang nanti memberikan nilai person.

Anda juga bisa mendapatkan informasi lainnya tentang permintaan, seperti kode status pada res.status atau informasi lainnya di dalam res.request.

Langkah 3 — Membuat Permintaan POST

Dalam langkah ini, Anda akan menggunakan Axios bersama metode permintaan HTTP lainnya bernama POST.

Hapus kode sebelumnya di PersonList dan tambahkan yang berikut untuk membuat suatu bentuk yang memungkinkan masukan pengguna dan selanjutnya melakukan POST konten ke API:

digital-ocean-tutorial/src/PersonList.js

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    name: '',
  }

  handleChange = event => {
    this.setState({ name: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();

    const user = {
      name: this.state.name
    };

    axios.post(`https://jsonplaceholder.typicode.com/users`, { user })
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Person Name:
            <input type="text" name="name" onChange={this.handleChange} />
          </label>
          <button type="submit">Add</button>
        </form>
      </div>
    )
  }
}

Di dalam fungsi handleSubmit, Anda mencegah tindakan asali formulir tersebut. Kemudian, perbarui state ke masukan user.

Penggunaan POST memberi Anda objek respons yang sama dengan informasi yang dapat Anda gunakan di dalam panggilan then.

Untuk menyelesaikan permintaan POST, tangkap dahulu masukan user. Kemudian, tambahkan masukan bersama permintaan POST, yang akan memberi Anda respons. Anda nanti dapat melakukan console.log respons tersebut, yang akan menampilkan masukan user di formulir.

Langkah 4 — Membuat Permintaan DELETE

Dalam contoh ini, Anda akan melihat cara menghapus item dari API menggunakan axios.delete dan meneruskan URL sebagai parameter.

Ubah kode untuk formulir dari contoh POST untuk menghapus pengguna sebagai ganti menambahkan yang baru:

digital-ocean-tutorial/src/PersonList.js

import React from 'react';
import axios from 'axios';

export default class PersonList extends React.Component {
  state = {
    id: '',
  }

  handleChange = event => {
    this.setState({ id: event.target.value });
  }

  handleSubmit = event => {
    event.preventDefault();

    axios.delete(`https://jsonplaceholder.typicode.com/users/${this.state.id}`)
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <label>
            Person ID:
            <input type="text" name="id" onChange={this.handleChange} />
          </label>
          <button type="submit">Delete</button>
        </form>
      </div>
    )
  }
}

Sekali lagi, objek res memberi Anda informasi tentang permintaan. Anda nanti dapat melakukan console.log informasi itu lagi setelah formulir dikirimkan.

Langkah 5 — Menggunakan Instans Dasar di Axios

Dalam contoh ini, Anda akan melihat cara menyiapkan _instans dasa_r tempat Anda mendefinisikan URL dan elemen konfigurasi lainnya.

Buat berkas terpisah bernama api.js:

  1. nano src/api.js

Ekspor instans axios yang baru dengan asali ini:

digital-ocean-tutorial/src/api.js
import axios from 'axios';

export default axios.create({
  baseURL: `http://jsonplaceholder.typicode.com/`
});

Setelah instans asali disiapkan, itu nanti dapat digunakan di dalam komponen PersonList. Anda mengimpor instans baru seperti ini:

digital-ocean-tutorial/src/PersonList.js
import React from 'react';
import axios from 'axios';

import API from '../api';

export default class PersonList extends React.Component {
  handleSubmit = event => {
    event.preventDefault();

    API.delete(`users/${this.state.id}`)
      .then(res => {
        console.log(res);
        console.log(res.data);
      })
  }
}

Karena http://jsonplaceholder.typicode.com/ kini merupakan URL basis, Anda tidak perlu lagi mengetikkan URL selengkapnya setiap kali ingin mencapai titik akhir yang berbeda di API.

Langkah 6 — Menggunakan async dan await

Dalam contoh ini, Anda akan melihat cara menggunakan async dan await untuk menangani janji.

Kata kunci await menentukan promise dan mengembalikan value. Value tersebut nanti dapat diberikan ke variabel.

handleSubmit = async event => {
  event.preventDefault();

  //
  const response = await API.delete(`users/${this.state.id}`);

  console.log(response);
  console.log(response.data);
};

Dalam contoh kode ini, .then() telah diganti. promise telah diputuskan dan nilainya disimpan di dalam variabel response.

Kesimpulan

Dalam tutorial ini, Anda telah mendalami beberapa contoh tentang cara menggunakan Axios di dalam aplikasi React untuk membuat permintaan HTTP dan menangani respons.

Jika Anda ingin mempelajari lebih lanjut tentang React, lihat seri Cara Menulis Kode di React.js, atau lihat laman topik React untuk latihan dan proyek pemrograman lainnya.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors


Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more