One place for hosting & domains

      React

      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

      Como usar o Axios com o React


      Introdução

      Muitos projetos na internet precisam interagir com uma API REST em algum ponto em seu desenvolvimento. O Axios é um cliente HTTP leve baseado no serviço $http dentro do Angular.js v1.x e é semelhante à API Fetch nativa do JavaScript.

      O Axios é baseado em promessas, o que oferece a capacidade de aproveitar o async e await do JavaScript para um código assíncrono mais legível.

      Também é possível interceptar e cancelar solicitações, e existe uma proteção integrada do lado do cliente contra a falsificação de solicitações entre sites.

      Neste artigo, você irá explorar exemplos de como usar o Axios para acessar a famosa API JSON Placeholder dentro de um aplicativo React.

      Pré-requisitos

      Para acompanhar este artigo, será necessário o seguinte:

      Passo 1 — Adicionando o Axios ao projeto

      Neste seção, você irá adicionar o Axios ao projeto React digital-ocean-tutorial que você criou seguindo o tutorial Como configurar um projeto do React com o Create React App.

      Para adicionar o Axios ao projeto, abra seu terminal e mude os diretórios nele:

      • cd digital-ocean-tutorial

      Em seguida, execute este comando para instalar o Axios:

      Depois disso, será necessário importar o Axios para dentro do arquivo no qual você deseja usá-lo.

      Passo 2 — Criando uma solicitação GET

      Neste exemplo, um novo componente será criado e o Axios será importado nele para enviar uma solicitação GET.

      Dentro da pasta src do seu projeto React, crie um novo componente chamado PersonList.js:

      Adicione o código a seguir ao 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>
          )
        }
      }
      

      Primeiro, você importa o React e o Axios para que ambos possam ser usados no componente. Em seguida, entra no gancho de ciclo de vida componentDidMount e executa uma solicitação GET.

      Você usa o axios.get(url) com uma URL de um ponto de extremidade da API para obter uma promessa que retorna um objeto de resposta. Dentro do objeto de resposta, há dados aos quais é atribuído o valor de person.

      Além disso, é possível obter outras informações sobre a solicitação, como o código de status em res.status ou mais informações dentro de res.request.

      Passo 3 — Criando uma solicitação POST

      Neste passo, você usará o Axios com outro método de solicitação HTTP chamado POST.

      Remova o código anterior em PersonList e adicione o seguinte para criar um formulário que permite a entrada do usuário e posteriormente POSTs (posta) o conteúdo em uma 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 da função handleSubmit, você impede a ação padrão do formulário. Em seguida, atualiza o state para a entrada do user.

      Usar o POST gera o mesmo objeto de resposta com informações que podem ser usadas dentro de uma chamada then.

      Para completar a solicitação POST, você primeiramente captura a entrada do user. Em seguida, adiciona a entrada juntamente com a solicitação POST, o que lhe dará uma resposta. Depois disso, você pode aplicar o console.log na resposta, o que mostra a entrada do user no formulário.

      Passo 4 — Criando uma solicitação DELETE

      Neste exemplo, você verá como excluir itens de uma API usando o axios.delete e passando uma URL como um parâmetro.

      Altere o código do formulário do exemplo do POST para excluir um usuário ao invés de adicionar um novo:

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

      Novamente, o objeto res fornece informações sobre a solicitação. Em seguida, você pode usar novamente o console.log nessas informações após o formulário ser enviado.

      Passo 5 — Usando uma instância base no Axios

      Neste exemplo, você verá como configurar uma instância base na qual é possível definir uma URL, além de qualquer outro elemento de configuração.

      Crie um arquivo separado chamado api.js:

      Exporte uma nova instância axios com esses valores padrão:

      digital-ocean-tutorial/src/api.js

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

      Assim que a instância padrão for configurada, ela pode então ser usada dentro do componente PersonList. Importe uma nova instância desta 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);
            })
        }
      }
      

      Como http://jsonplaceholder.typicode.com/ é agora a URL base, não é mais necessário escrever toda a URL sempre que quiser acessar um ponto de extremidade diferente na API.

      Passo 6 — Usando o async e await

      Neste exemplo, você verá como usar o async e await para trabalhar com promessas.

      A palavra-chave await resolve a promise e retorna o value. Depois disso, o value pode ser atribuído a uma variável.

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

      Nesse exemplo de código, o .then() foi substituído. A promessa é resolvida, e o valor é armazenado dentro da variável response.

      Conclusão

      Neste tutorial, você explorou diversos exemplos sobre como usar o Axios dentro de um aplicativo React para criar solicitações HTTP e processar as repostas.

      Se quiser aprender mais sobre o React, confira a série Como programar no React.js, ou veja a página de tópico do React para mais exercícios e projetos de programação.



      Source link