Vue Academy · Leçon

Requêtes HTTP avec Axios

Effectuez des requêtes GET et POST vers des API avec Axios

Leçon 1 sur 313 étapes

Requêtes HTTP avec Axios est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 3 leçons au total.

Communiquer avec des API

La plupart des applications réelles chargent des données depuis un serveur principal via HTTP. Bien que le navigateur propose fetch intégré, de nombreux projets Vue utilisent Axios, un client HTTP populaire fondé sur les promesses, doté d'une API plus simple, de l'analyse automatique du JSON et d'options de configuration puissantes.

Installer Axios

Ajoutez Axios à votre projet avec votre gestionnaire de paquets, puis importez-le là où vous en avez besoin.

npm install axios

Importer Axios

Importez l'exportation par défaut pour commencer à envoyer des requêtes.

import axios from "axios"

Une requête GET

Utilisez axios.get pour récupérer des données. Cette méthode renvoie une promesse qui se résout en un objet de réponse ; le corps se trouve dans response.data, déjà analysé depuis le JSON.

axios.get("https://api.example.com/users")
  .then(response => {
    console.log(response.data)
  })

Une requête POST

Utilisez axios.post pour envoyer des données. Le deuxième argument est le corps de la requête, qu'Axios convertit automatiquement en JSON.

axios.post("https://api.example.com/users", {
  name: "Grace",
  email: "grace@example.com"
})

Utiliser async/await

Les promesses sont plus lisibles avec async/await. Marquez la fonction comme asynchrone et attendez la requête.

async function loadUsers() {
  const response = await axios.get("/api/users")
  return response.data
}

Dans une méthode Vue

Un schéma courant consiste à appeler Axios depuis une méthode de composant et à stocker le résultat dans des données réactives.

export default {
  data() {
    return { users: [] }
  },
  methods: {
    async fetchUsers() {
      const res = await axios.get("/api/users")
      this.users = res.data
    }
  }
}

Configuration de requête : paramètres d'URL

Transmettez un objet params pour ajouter des paramètres à la chaîne de requête. Axios construit l'URL pour vous.

axios.get("/api/users", {
  params: { page: 2, limit: 10 }
})
// requests /api/users?page=2&limit=10

Configuration de requête : en-têtes

Envoyez des en-têtes personnalisés, comme un jeton d'autorisation, dans l'objet de configuration.

axios.get("/api/profile", {
  headers: {
    Authorization: "Bearer " + token
  }
})

Configurer l'URL de base

Répéter l'URL complète partout est source d'erreurs. Créez une instance Axios avec une baseURL et des valeurs par défaut communes, puis utilisez-la dans toute votre application.

import axios from "axios"

export const api = axios.create({
  baseURL: "https://api.example.com",
  timeout: 5000,
  headers: { "Content-Type": "application/json" }
})

// elsewhere: api.get("/users")

Autres méthodes HTTP

Axios reprend les verbes HTTP courants : get, post, put, patch et delete. Utilisez celui qui correspond à l'action que vous souhaitez effectuer.

api.put("/users/1", { name: "Updated" })
api.patch("/users/1", { name: "Patched" })
api.delete("/users/1")

Vérification rapide

Vérifiez vos connaissances sur les requêtes Axios.

Réponds-y dans la leçon interactive

Récapitulatif

Axios est un client HTTP fondé sur les promesses. Utilisez get, post, put, patch et delete, transmettez params et headers dans l'objet de configuration, et privilégiez async/await pour une meilleure lisibilité. Une instance partagée créée avec axios.create et une baseURL évite de répéter le code dans les requêtes. Vous allez maintenant récupérer les données au moment approprié du cycle de vie d'un composant.

Gratuit pour commencer

Apprends HTML avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 42
Leçons: 156

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Requêtes HTTP avec Axios » est-elle gratuite ?

Oui — le texte complet de « Requêtes HTTP avec Axios » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 3 leçons au total.

Qu'est-ce que j'apprendrai dans « Requêtes HTTP avec Axios » ?

Effectuez des requêtes GET et POST vers des API avec Axios Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 3.

Combien de temps prend la leçon « Requêtes HTTP avec Axios » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Requêtes HTTP avec Axios
Hooks de cycle de vie et récupération des données
Gestion des erreurs et intercepteurs globaux

← Retour à Vue Academy