Comment le front-end de vue appelle-t-il l'interface back-end ?

Étapes pour que le front-end de Vue appelle l'interface back-end : Installez la bibliothèque Axios pour créer le client Axios. Envoyez des requêtes HTTP : GET, POST, PUT, DELETE, etc. Traitez les données de réponse : utilisez .then(). pour traiter les messages d'erreur : utilisez .catch()

Comment appeler l'interface backend depuis le front-end Vue

Pour appeler l'interface backend depuis le front-end Vue, vous pouvez suivre les étapes suivantes :

1. Utilisez la bibliothèque Axios

Axios est une bibliothèque client HTTP JavaScript populaire, qui simplifie la communication avec l'interface backend.

2. Installez Axios

Installez Axios dans votre projet Vue :

<code class="bash">npm install axios</code>

3. Créez un client Axios

Créez une instance Axios :

<code class="javascript">import axios from 'axios';

// 创建 Axios 客户端
const client = axios.create({
  baseURL: 'http://localhost:3000/api', // 你的后端 API 基 URL
});</code>

4. Le client Axios envoie une requête HTTP :

<code class="javascript">// GET 请求
client.get('/users').then((response) => {
  // 处理响应数据
});

// POST 请求
client.post('/users', { name: 'John Doe' }).then((response) => {
  // 处理响应数据
});

// 其他 HTTP 方法（PUT、DELETE 等）的使用方式类似</code>

5. Traitement de la réponse

Une fois le serveur répondu, le client Axios renvoie une promesse contenant les données de réponse et les métadonnées. Vous pouvez utiliser .then() pour gérer la réponse :

<code class="javascript">client.get('/users').then((response) => {
  // 响应数据存储在 response.data 中
  console.log(response.data);
});</code>

6. Gestion des erreurs .then() 处理响应：

<code class="javascript">client.get('/users').catch((error) => {
  // 错误信息存储在 error.response 中
  console.error(error.response);
});</code>

6. 错误处理

如果请求失败，Axios 会返回一个 Promise，包含错误信息。你可以使用 .catch()

🎜Si la requête échoue, Axios renverra une promesse contenant des informations d'erreur. Vous pouvez utiliser .catch() pour gérer les erreurs : 🎜rrreee

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!