One place for hosting & domains

      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:

      • cd digital-ocean-tutorial

      Kemudian, jalankan perintah ini untuk menginstal 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:

      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 dasar tempat Anda mendefinisikan URL dan elemen konfigurasi lainnya.

      Buat berkas terpisah bernama 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.



      Source link

      Verwenden von Axios mit React


      Einführung

      Viele Projekte im Web müssen in einer bestimmten Phase ihrer Entwicklung mit einer REST-API verbunden werden. Axios ist ein leichter HTTP-Client, der auf dem Dienst $http innerhalb von Angular.js v1.x basiert und dem nativen JavaScript Fetch API ähnlich ist.

      Axios ist Zusage-basiert, was Ihnen die Möglichkeit bietet, die Vorteile von async und await von JavaScript zu nutzen, um einen lesbareren asynchronen Code zu erhalten.

      Sie können Anfragen auch abfangen und abbrechen, und es gibt einen integrierten Schutz auf Client-Seite gegen die Fälschung von Cross-Site-Anfragen.

      In diesem Artikel sehen Sie Beispiele für die Verwendung von Axios für den Zugriff auf die beliebte JSON Placeholder-API innerhalb einer React-Anwendung.

      Voraussetzungen

      Um diesem Artikel folgen zu können, benötigen Sie Folgendes:

      Schritt 1 — Hinzufügen von Axios zum Projekt

      In diesem Abschnitt fügen Sie Axios dem React-Projekt digital-ocean-tutorial hinzu, das Sie entsprechend dem Tutorial Einrichten eines React-Projekts mit Create React App erstellt haben.

      Um Axios zu dem Projekt hinzuzufügen, öffnen Sie Ihr Terminal und wechseln Sie die Verzeichnisse in Ihrem Projekt:

      • cd digital-ocean-tutorial

      Führen Sie zur Installation von Axios dann diesen Befehl aus:

      Als Nächstes müssen Sie Axios in die Datei importieren, in der Sie es verwenden möchten.

      Schritt 2 — Erstellen einer GET-Anfrage

      In diesem Beispiel erstellen Sie eine neue Komponente und importieren Axios in diese, um eine GET-Anfrage zu senden.

      Erstellen Sie im Ordner src Ihres React-Projekts eine neue Komponente namens PersonList.js:

      Fügen Sie den folgenden Code zu der Komponente hinzu:

      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>
          )
        }
      }
      

      Zuerst importieren Sie React und Axios, sodass beide in der Komponente verwendet werden können. Dann haken Sie sich in den Lifecyle-Hook componentDidMount und führen eine GET-Anfrage aus.

      Sie verwenden axios.get(url) mit einer URL aus einem API-Endpunkt, um eine Zusage zu erhalten, die ein Antwortobjekt zurückgibt. Innerhalb des Antwortobjekts gibt es Daten, die dann dem Wert von person zugewiesen werden.

      Sie können auch andere Informationen über die Anfrage erhalten, wie den Statuscode unter res.status oder mehr Informationen innerhalb von res.request.

      Schritt 3 — Erstellen einer POST-Anfrage

      In diesem Schritt verwenden Sie Axios mit einem anderen HTTP-Anfrageverfahren namens POST.

      Entfernen Sie den vorherigen Code in PersonList und fügen Sie Folgendes hinzu, um ein Formular zu erstellen, das die Benutzereingaben ermöglicht und anschließend den Inhalt mittels POST an eine API sendet:

      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>
          )
        }
      }
      

      Innerhalb der Funktion handleSubmit verhindern Sie die Standardaktion des Formulars. Aktualisieren Sie dann den state auf die user-Eingabe.

      Mit der Verwendung von POST erhalten Sie das gleiche Antwortobjekt mit Informationen, die Sie innerhalb eines then-Abrufs verwenden können.

      Um die POST-Anfrage abzuschließen, erfassen Sie zunächst die user-Eingabe. Dann fügen Sie die Eingabe zusammen mit der POST-Anfrage hinzu, wodurch Sie eine Antwort erhalten. Anschließen können Sie die Antwort in console.log protokollieren, wobei die user-Eingabe im Formular angezeigt werden sollte.

      Schritt 4 — Erstellen einer DELETE-Anfrage

      In diesem Beispiel sehen Sie, wie Elemente aus einer API unter Verwendung von axios.delete gelöscht werden und eine URL als ein Parameter übergeben wird.

      Ändern Sie den Code für das Formular aus dem POST-Beispiel, um einen Benutzer zu löschen, anstatt einen neuen hinzuzufügen:

      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>
          )
        }
      }
      

      Auch hier gibt Ihnen das res-Objekt Informationen über die Anfrage. Nach der Übermittlung des Formulars können Sie dann diese Informationen erneut in console.log protokollieren.

      Schritt 5 — Verwenden einer Basisinstanz in Axios

      In diesem Beispiel sehen Sie, wie Sie eine Basisinstanz einrichten können, in der Sie eine URL und alle anderen Konfigurationselemente definieren können.

      Erstellen Sie eine separate Datei namens api.js:

      Exportieren Sie eine neue axios-Instanz mit diesen Standardeinstellungen:

      digital-ocean-tutorial/src/api.js

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

      Sobald die Standardinstanz eingerichtet ist, kann sie dann innerhalb der Komponenten PersonList verwendet werden. Sie importieren die neue Instanz wie folgt:

      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);
            })
        }
      }
      

      Da http://jsonplaceholder.typicode.com/ nun die Basis-URL ist, müssen Sie nicht länger die gesamte URL eingeben, wenn Sie einen anderen Endpunkt auf der API treffen möchten.

      Schritt 6 — Verwenden von async und await

      In diesem Beispiel sehen Sie, wie Sie async und await verwenden können, um mit Zusagen zu arbeiten.

      Das Schlüsselwort await löst die Zusage promise aus und gibt den Wert value zurück. Der Wert value kann dann einer Variablen zugewiesen werden.

      handleSubmit = async event => {
        event.preventDefault();
      
        //
        const response = await API.delete(`users/${this.state.id}`);
      
        console.log(response);
        console.log(response.data);
      };
      

      In diesem Code-Beispiel wird das .then() ersetzt. Die Zusage promise wird aufgelöst und der Wert wird in der Variable response gespeichert.

      Zusammenfassung

      In diesem Tutorial haben Sie mehrere Beispiele für die Verwendung von Axios innerhalb einer React-Anwendung zur Erstellung von HTTP-Anfragen und zur Handhabung von Antworten untersucht.

      Wenn Sie mehr über React erfahren möchten, lesen Sie die Reihe Codieren in React.js oder sehen Sie sich die React-Themenseite für weitere Übungen und Programmierprojekte an.



      Source link

      Cómo usar Axios con React


      Introducción

      Muchos proyectos en la web deben interactuar con una API REST en algún momento en su desarrollo. Axios es un cliente HTTP ligero basado en el servicio $http en Angular.so v1.x y es similar a la API Fetch nativa de JavaScript.

      Axios se basa en promesas, lo que le permite aprovechar async y await de JavaScript para obtener un código asíncrono más legible.

      También puede interceptar y cancelar solicitudes, y hay una protección integrada del lado del cliente contra la falsificación de solicitudes entre sitios.

      En este artículo, verá ejemplos de cómo usar Axios para acceder a la popular API JSON Placeholder en una aplicación React.

      Requisitos previos

      Para seguir este artículo, necesitará lo siguiente:

      Paso 1: Añadir Axios al proyecto

      En esta sección, añadirá Axios al proyecto digital-ocean-tutorial de React que creó siguiendo el tutorial Cómo configurar un proyecto React con Create React App.

      Para añadir Axios al proyecto, abra su terminal y cambie los directorios a su proyecto:

      • cd digital-ocean-tutorial

      A continuación, ejecute este comando para instalar Axios:

      Luego, tendrá que importar Axios al archivo en el que desea usarlo.

      Paso 2: Realizar una solicitud GET

      En este ejemplo, creará un nuevo componente e importará Axios a él para enviar una solicitud GET.

      Dentro de la carpeta src de su proyecto React, cree un nuevo componente llamado PersonList.js:

      Añada el siguiente código al componente:

      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>
          )
        }
      }
      

      Primero, debe importar React y Axios para que ambos puedan usarse en el componente. A continuación, enlazará en el enlace de ciclo de vida componentDidMount y realizará una solicitud GET.

      Utiliza axios.get(url) con una URL desde un endpoint API para obtener una promesa que devuelve un objeto de respuesta. Dentro del objeto de respuesta, hay datos que se asignan al valor de person.

      También puede obtener otra información sobre la solicitud, como el código de estado bajo res.status o más información dentro de res.request.

      Paso 3: Realizar una solicitud POST

      En este paso, usará Axios con otro método de solicitud HTTP llamado POST.

      Elimine el código anterior en PersonList y añada el siguiente para crear un formulario que permita la entrada del usuario y, posteriormente, haga POST del contenido a una 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>
          )
        }
      }
      

      Dentro de la función handleSubmit, evita la acción predeterminada del formulario. A continuación actualice el estado para la entrada user.

      Usar POST le proporciona el mismo objeto de respuesta con información que puede usar dentro de una invocación then.

      Para completar la solicitud POST, primero debe capturar la entrada user. A continuación añade la entrada junto con la solicitud POST, lo que le proporciona una respuesta. Luego puede hacer console.log a la respuesta, que debería mostrar la entrada user en el formulario.

      Paso 4: Realizar una solicitud DELETE

      En este ejemplo, verá cómo eliminar elementos de una API usando axios.delete y pasando una URL como parámetro.

      Cambie el código para el formulario desde el ejemplo POST para eliminar a un usuario en vez de añadir uno nuevo:

      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>
          )
        }
      }
      

      De nuevo, el objeto res le proporciona información sobre la solicitud. Luego, puede aplicar console.log a esta información de nuevo tras enviar el formulario.

      Paso 5: Usar una instancia base en Axios

      En este ejemplo, verá cómo puede configurar una instancia base en la cual puede definir una URL y cualquier otro elemento de configuración.

      Cree un archivo independiente llamado api.js:

      Exporte una nueva instancia axios con estos valores predeterminados:

      digital-ocean-tutorial/src/api.js

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

      Una vez configurada la instancia predeterminada, puede usarse dentro del componente PersonList. Importa la nueva instancia de esta forma:

      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);
            })
        }
      }
      

      Debido a que http://jsonplaceholder.typicode.com/ es ahora la URL base, ya no necesita escribir toda la URL cada vez que desee llegar a un endpoint diferente sobre la API.

      Paso 6: Usar async y await

      En este ejemplo, verá cómo puede usar async y await para trabajar con promesas.

      La palabra clave await resuelve promise y devuelve value. value puede asignarse a una variable.

      handleSubmit = async event => {
        event.preventDefault();
      
        //
        const response = await API.delete(`users/${this.state.id}`);
      
        console.log(response);
        console.log(response.data);
      };
      

      En esta muestra de código, se sustituye .then(). Se resuelve promise, y el valor se guarda dentro de la variable response.

      Conclusión

      En este tutorial, exploró varios ejemplos sobre cómo usar Axios dentro de una aplicación React para crear solicitudes HTTP y gestionar las respuestas.

      Si desea aprender más sobre React, consulte la serie Cómo crear código en React.js, o consulte la página del tema React para ver más ejercicios y proyectos de programación.



      Source link