One place for hosting & domains

      Axios

      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

      Использование Axios с React


      Введение

      Многим веб-проектам на некотором этапе их развития требуется взаимодействие с REST API. Axios — это облегченный клиент HTTP на базе сервиса $http с Angular.js v1.x, похожего на собственный JavaScript Fetch API.

      Axios основан на промисах, что дает вам возможность использовать возможности JavaScript async и await для получения более удобочитаемого асинхронного кода.

      Вы можете перехватывать и отменять запросы, также в клиенте имеется встроенная защита от подделки запросов между сайтами.

      В этой статье вы увидите примеры использования Axios для доступа к популярному JSON Placeholder API из приложения React.

      Предварительные требования

      Чтобы следовать за примерами этой статьи, вам потребуется следующее:

      Шаг 1 — Добавление Axios в проект

      В этом разделе мы добавим Axios в проект React digital-ocean-tutorial, созданный вами при выполнении учебного модуля Настройка проекта React Project с помощью приложения Create React App.

      Чтобы добавить Axios в проект, откройте терминал и поменяйте каталоги в вашем проекте:

      • cd digital-ocean-tutorial

      Затем запустите эту команду для установки Axios:

      Далее вам потребуется импортировать Axios в файл, где вы захотите его использовать.

      Шаг 2 — Создание запроса GET

      В этом примере мы создадим новый компонент и импортируем в него Axios для отправки запроса GET.

      Создайте в папке src вашего проекта React новый компонент с именем PersonList.js:

      Добавьте в компонент следующий код:

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

      Вначале вы импортируете React и Axios так, чтобы их можно было использовать в компоненте. Затем вы прикрепляетесь к крюку жизненного цикла componentDidMount и выполняете запрос GET.

      Вы используете axios.get(url) с URL от конечной точки API, чтобы получить промис, возвращающий объект ответа. Внутри объекта ответа имеются данные, которым присвоено значение person.

      Также вы можете получить и другую информацию о запросе, в том числе код состояния res.status, или дополнительную информацию внутри res.request.

      Шаг 3 — Составление запроса POST

      На этом шаге мы используем Axios с еще одним методом запросов HTTP, а именно POST.

      Удалите предыдущий код в PersonList и добавьте следующий код, чтобы создать форму для ввода данных пользователя и последующей отправки контента в API методом POST:

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

      Внутри функции handleSubmit вы предотвратили действие формы по умолчанию. Затем следует обновить state на ввод user.

      Использование POST дает тот же объект ответа с информацией, которую вы сможете использовать внутри вызова then.

      Чтобы выполнить запрос POST, мы вначале захватываем ввод user. Затем мы добавляем ввод вместе с запросом POST и получаем ответ. Вы можете отправить ответ в console.log, где ввод user будет показан в форме.

      Шаг 4 — Создание запроса DELETE

      В этом примере вы видите, как удалять элементы из API, используя axios.delete и передавая URL как параметр.

      Измените код формы из примера POST, чтобы удалить пользователя вместо добавления нового:

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

      В этом случае объект res предоставляет информацию о запросе. Затем вы можете снова использовать console.log для этой информации после отправки формы.

      Шаг 5 — Использование базового экземпляра в Axios

      В этом примере вы видите, как можно создать базовый экземпляр, в котором вы можете задать определение URL-адреса и любых других элементов конфигурации.

      Создайте отдельный файл с именем api.js:

      Экспортируйте новый экземпляр axios со следующими значениями по умолчанию:

      digital-ocean-tutorial/src/api.js

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

      После настройки экземпляра по умолчанию его можно использовать внутри компонента PersonList. Новый экземпляр импортируется следующим образом:

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

      Поскольку http://jsonplaceholder.typicode.com/ теперь является базовым URL, вам больше не потребуется вводить URL полностью каждый раз, когда вы захотите использовать другую конечную точку API.

      Шаг 6 — Использование async и await

      В этом примере вы видите, как использовать async и await для работы с промисами.

      Ключевое слово await разрешает промис и возвращает значение. Затем значение может быть присвоено переменной.

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

      В этом примере кода выполняется замена .then(). Промис разрешается, и его значение сохраняется в переменной response.

      Заключение

      В этом учебном модуле мы изучили несколько примеров использования Axios в приложении React для создания запросов HTTP и ответов обработки.

      Если вы хотите узнать больше о React, ознакомьтесь с серией Программирование на React.js или посмотрите страницу темы React, где вы найдете дополнительные упражнения и проекты для программирования.



      Source link