One place for hosting & domains

      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

      Comment utiliser Axios avec React


      Introduction

      De nombreux projets sur le web doivent s’interfacer avec une API REST à un certain stade de leur développement. Axios est un client HTTP léger basé sur le service $http dans Angular.js v1.x et est similaire à l’API native JavaScript Fetch.

      Axios est basé sur Promise, ce qui vous permet de profiter des avantages d’async de JavaScript et await pour un code asynchrone plus lisible.

      Vous pouvez également intercepter et annuler des demandes, et il existe une protection intégrée côté client contre la falsification des demandes intersites.

      Dans cet article, vous explorerez des exemples d’utilisation d’Axios pour accéder à la populaire API JSON Placeholder au sein d’une application React.

      Conditions préalables

      Pour suivre cet article, vous aurez besoin de ce qui suit :

      Étape 1 — Ajouter Axios au projet

      Dans cette section, vous ajouterez Axios au projet React digital-ocean-tutorial que vous avez créé en suivant le tutoriel Comment mettre en place un projet React avec Create React App.

      Pour ajouter Axios au projet, ouvrez votre terminal et changez de répertoire dans votre projet :

      • cd digital-ocean-tutorial

      Exécutez ensuite cette commande pour installer Axios :

      Ensuite, vous devrez importer Axios dans le fichier dans lequel vous voulez l'utiliser.

      Étape 2 — Faire une requête GET

      Dans cet exemple, vous créez un nouveau composant et vous y importez Axios pour envoyer une demande GET.

      Dans le dossier src de votre projet React, créez un nouveau composant nommé PersonList.js :

      Ajoutez le code suivant au composant :

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

      Tout d'abord, vous importez React et Axios afin que les deux puissent être utilisés dans le composant. Ensuite, vous vous branchez sur le componentDidMount lifecycle hook et effectuez une demande GET.

      Vous utilisez axios.get(url) avec une URL provenant d'un point final de l'API pour obtenir une promesse qui renvoie un objet de réponse. À l'intérieur de l'objet de réponse, il y a des données auxquelles on attribue la valeur person.

      Vous pouvez également obtenir d'autres informations sur la demande, telles que le code de statut sous res.status ou plus d'informations à l'intérieur de res.request.

      Étape 3 — Faire une demande POST

      Dans cette étape, vous utiliserez Axios avec une autre méthode de requête HTTP appelée POST.

      Supprimer le code précédent dans PersonList et ajoutez les éléments suivants pour créer un formulaire qui permet à l'utilisateur d'entrer des données et ensuite POSTer le contenu à une 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>
          )
        }
      }
      

      Dans la fonction handleSubmit, vous empêchez l'action par défaut du formulaire. Ensuite, vous mettez à jour l'état en entrée de l'utilisateur.

      Utiliser POST vous donne le même objet de réponse avec des informations que vous pouvez utiliser dans un appel then.

      Pour compléter la demande POST, vous devez d'abord saisir l'entrée de l'utilisateur. Ensuite, vous ajoutez les données en même temps que la demande POST, qui vous donnera une réponse. Vous pouvez alors utiliser console.log pour la réponse, qui devrait montrer l'entrée user dans le formulaire.

      Étape 4 — Faire une demande DELETE

      Dans cet exemple, vous verrez comment supprimer des éléments d'une API en utilisant axios.delete et en passant une URL comme paramètre.

      Changez le code du formulaire de l'exemple POST pour supprimer un utilisateur au lieu d'en ajouter un nouveau :

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

      Là encore, l'objet res vous fournit des informations sur la demande. Vous pouvez ensuite réintroduire ces informations dans le fichier console.log après l'envoi du formulaire.

      Étape 5 — Utiliser une instance de base dans Axios

      Dans cet exemple, vous verrez comment vous pouvez mettre en place une instance de base dans laquelle vous pouvez définir une URL et tout autre élément de configuration.

      Créez un fichier séparé nommé api.js:

      Exportez une nouvelle instance axios avec ces valeurs par défaut :

      digital-ocean-tutorial/src/api.js

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

      Une fois que l'instance par défaut est configurée, elle peut être utilisée dans le composant PersonList. Vous importez la nouvelle instance comme ceci :

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

      Parce que http://jsonplaceholder.typicode.com/ est maintenant l'URL de base, vous n'avez plus besoin de taper l'URL complète chaque fois que vous voulez atteindre un point d'extrémité différent sur l'API.

      Étape 6 — Utilisation de async et de await

      Dans cet exemple, vous verrez comment vous pouvez utiliser async et await pour travailler avec des Promises.

      Le mot-clé await résout la Promise et renvoie la value. La value peut alors être attribuée à une variable.

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

      Dans cet exemple de code, le .then() est remplacé. La Promise est résolue, et la value est stockée dans la variable de response.

      Conclusion

      Dans ce tutoriel, vous avez exploré plusieurs exemples sur la façon d'utiliser Axios dans une application React pour créer des requêtes HTTP et gérer les réponses.

      Si vous souhaitez en savoir plus sur le programme React, consultez la série Comment coder dans React.js ou consultez la page thématique de React pour plus d'exercices et de projets de programmation.



      Source link