Comment Utiliser Axios avec React.js

Introduction

Axios est une bibliothèque JavaScript populaire utilisée pour faire des requêtes HTTP. Elle est simple à utiliser et offre des fonctionnalités avancées comme la gestion des erreurs, les requêtes asynchrones, et bien plus encore. Dans cet article, nous allons voir comment intégrer Axios dans une application React.js et comment l'utiliser pour effectuer des appels API.

Pourquoi utiliser Axios ?

Facilité d'Utilisation : Axios simplifie la gestion des requêtes HTTP avec une syntaxe claire et concise.
Gestion des Erreurs : Fournit des mécanismes robustes pour gérer les erreurs de requêtes.
Support des Promesses : Utilise des promesses, ce qui facilite la gestion des requêtes asynchrones.

Installation

Commencez par installer Axios :

npm install axios

1. Créer une Instance Axios avec Configuration Globale

Créez un fichier axiosConfig.js pour définir une instance Axios avec une configuration globale.

import axios from 'axios';
const axiosInstance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com',
  headers: { 'Content-Type': 'application/json', Authorization: 'AUTH TOKEN' },
});

export default axiosInstance;

2. Faire une Requête GET

Créez un fichier App.js et utilisez Axios pour faire une requête GET.

import React, { useEffect, useState } from 'react';
import axiosInstance from './axiosConfig';
const App = () => {
const [data, setData] = useState([]);
useEffect(() => {
axiosInstance
.get('/posts')
.then(response => {
setData(response.data);
})
.catch(error => {
console.error('There was an error making the request', error);
});
}, []);
return (
<div>
{' '}
<h1>Posts</h1>{' '}
<ul>
{' '}
{data.map(post => (
<li key={post.id}>{post.title}</li>
))}{' '}
</ul>{' '}
</div>
);
};
export default App;

3. Faire une Requête POST

Ajoutez un formulaire pour faire une requête POST.

import React, { useState } from 'react';
import axiosInstance from './axiosConfig';
const App = () => {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');
  const [response, setResponse] = useState(null);
  const handleSubmit = e => {
    e.preventDefault();
    axiosInstance
      .post('/posts', { title, body })
      .then(response => {
        setResponse(response.data);
      })
      .catch(error => {
        console.error('There was an error making the request', error);
      });
  };
  return (
    <div>
      {' '}
      <h1>Create Post</h1>{' '}
      <form onSubmit={handleSubmit}>
        {' '}
        <input
          type='text'
          value={title}
          onChange={e => setTitle(e.target.value)}
          placeholder='Title'
        />{' '}
        <textarea
          value={body}
          onChange={e => setBody(e.target.value)}
          placeholder='Body'
        />{' '}
        <button type='submit'>Submit</button>{' '}
      </form>{' '}
      {response && (
        <div>
          {' '}
          <h2>Response</h2> <pre>{JSON.stringify(response, null, 2)}</pre>{' '}
        </div>
      )}{' '}
    </div>
  );
};
export default App;