Compétences en développement Vue3+TS+Vite : comment interagir avec l'API backend

Compétences en développement Vue3+TS+Vite : Comment interagir avec l'API back-end

Introduction :
Dans le développement d'applications Web, l'interaction des données entre le front-end et le back-end est un lien très important. En tant que framework front-end populaire, Vue3 propose de nombreuses façons d'interagir avec les API back-end. Cet article expliquera comment utiliser l'environnement de développement Vue3 + TypeScript + Vite pour interagir avec l'API back-end et approfondir la compréhension grâce à des exemples de code.

1. Utilisez Axios pour envoyer des requêtes
Axios est une bibliothèque de requêtes HTTP populaire qui prend en charge l'utilisation dans les navigateurs et les environnements Node.js. Nous devons d'abord installer Axios dans le projet et l'introduire si nécessaire.

Exemple de code :

import axios from 'axios';

export function fetchUserData(userId: number) {
  return axios.get(`/api/user/${userId}`);
}

Dans cet exemple, nous définissons une fonction fetchUserData qui accepte un paramètre userId et utilise Axios pour envoyer une requête GET au /api/user/{userId}path de l'API backend. Axios renverra une promesse et nous pourrons utiliser la méthode then pour traiter les données renvoyées.

2. Utilisez l'API Fetch pour envoyer des requêtes
En plus d'Axios, nous pouvons également utiliser l'API Fetch native de JavaScript pour envoyer des requêtes. L'API Fetch est une alternative moderne à la bibliothèque de requêtes HTTP XMLHttpRequest, qui prend en charge l'utilisation dans les navigateurs.

Exemple de code :

export function fetchUserData(userId: number) {
  return fetch(`/api/user/${userId}`).then(res => res.json());
}

Dans cet exemple, nous utilisons l'API Fetch pour envoyer une requête GET et traiter les données renvoyées via la méthode then. Il convient de noter que l'API Fetch renvoie une promesse et que nous devons utiliser la méthode json pour analyser les données renvoyées.

3. Résultat du traitement de la demande
D'une manière générale, les données renvoyées par l'API backend peuvent avoir deux situations : succès et échec. Nous devons déterminer si la demande aboutit en fonction du code d'état renvoyé et traiter différents résultats.

Exemple de code :

export function fetchUserData(userId: number) {
  return axios.get(`/api/user/${userId}`).then(res => {
    if (res.status === 200) {
      // 请求成功
      return res.data;
    } else {
      // 请求失败
      throw new Error(res.statusText);
    }
  });
}

Dans cet exemple, nous utilisons Axios pour envoyer une requête GET et juger le code d'état renvoyé. Si le code d'état est 200, cela signifie que la demande est réussie et que nous pouvons obtenir les données renvoyées via res.data. Si le code d'état n'est pas 200, cela signifie que la requête a échoué et nous pouvons générer une erreur via l'instruction throw.

4. Utiliser asynchrone/attendre pour traiter les demandes
En plus d'utiliser la méthode then pour traiter Promise, nous pouvons également utiliser la syntaxe asynchrone/attendre introduite dans ES2017 pour traiter les demandes.

Exemple de code :

export async function fetchUserData(userId: number) {
  try {
    const res = await axios.get(`/api/user/${userId}`);
    if (res.status === 200) {
      return res.data;
    } else {
      throw new Error(res.statusText);
    }
  } catch (error) {
    console.error(error);
  }
}

Dans cet exemple, nous utilisons la syntaxe async/wait pour gérer les requêtes asynchrones. En ajoutant le mot-clé async devant la fonction, nous pouvons utiliser wait à l'intérieur de la fonction pour attendre le résultat d'une promesse. Dans l'instruction try-catch, nous pouvons utiliser wait pour attendre la requête GET d'Axios et traiter les résultats renvoyés de la même manière.

Conclusion :
Cet article présente comment utiliser l'environnement de développement Vue3 + TypeScript + Vite pour interagir avec l'API back-end et approfondit la compréhension à travers des exemples de code. Nous pouvons utiliser Axios ou Fetch API pour envoyer des requêtes et traiter les résultats de la requête en fonction du code d'état renvoyé. J'espère que cet article sera utile à tous pour interagir avec l'API backend dans le développement de Vue3.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!