Comment utiliser l'API UNI.Request Uni-App pour faire des demandes HTTP?

Comment utiliser API Uni.Request pour faire des demandes HTTP

L'API uni.request dans Uni-App est un outil polyvalent pour faire des demandes HTTP à divers serveurs. C'est un emballage autour de l'objet XMLHTTPRequest natif, offrant une approche plus pratique et multiplateforme. Voici une ventilation détaillée de la façon de l'utiliser:

Utilisation de base:

La fonction principale est uni.request() , qui prend un objet d'options comme argument. Cet objet spécifie les détails de la demande. Une simple demande de GET peut ressembler à ceci:

 <code class="javascript">uni.request({ url: 'https://api.example.com/data', method: 'GET', success: (res) => { console.log('Request successful:', res.data); }, fail: (err) => { console.error('Request failed:', err); }, complete: (res) => { console.log('Request completed:', res); } });</code>

Ce code envoie une demande GET à https://api.example.com/data . Le rappel success gère les réponses réussies, fail les erreurs et les exécutions complete indépendamment du succès ou de l'échec. res.data contient les données de réponse.

Options avancées:

uni.request prend en charge diverses options pour personnaliser vos demandes:

• method : Spécifie la méthode HTTP (obtenir, publier, mettre, supprimer, etc.). Par défaut pour obtenir.
• data : les données à envoyer avec la demande (généralement pour la publication, le put, etc.). Cela peut être un objet ou une chaîne.
• header : un objet contenant des en-têtes HTTP (par exemple, Content-Type , Authorization ).
• dataType : Spécifie le type de données attendu de la réponse («JSON» est courant).
• responseType : spécifie le type de réponse attendu («texte», «arraybuffer», etc.).
• timeout : définit un délai d'attente pour la demande en millisecondes.

Exemple de demande de poste:

 <code class="javascript">uni.request({ url: 'https://api.example.com/submit', method: 'POST', header: { 'Content-Type': 'application/json' }, data: { name: 'John Doe', email: 'john.doe@example.com' }, success: (res) => { // ... }, fail: (err) => { // ... } });</code>

Quelles sont les techniques courantes de gestion des erreurs lors de l'utilisation de Uni.Request dans Uni-App?

Une gestion des erreurs robuste est cruciale pour une expérience utilisateur fluide. Voici des techniques courantes pour gérer les erreurs avec uni.request :

• Rappel fail : le rappel fail est le principal mécanisme. Il reçoit un objet d'erreur contenant des informations sur l'échec (par exemple, code d'état, message d'erreur). Utilisez-le pour fournir des messages d'erreur informatifs à l'utilisateur ou enregistrez l'erreur de débogage.
• Vérification du code d'état: Vérifiez le code d'état HTTP dans le rappel fail (ou même en complete pour une manipulation plus complète). Différents codes d'état indiquent différents problèmes (404 introuvables, 500 erreurs de serveur interne, etc.). Gérer ces cas différemment, en fournissant des commentaires sur les utilisateurs sur mesure.
• Gestion des erreurs de réseau: détecter les problèmes de connectivité réseau. uni.request pourrait échouer en raison d'un manque de connexion Internet. Vous pouvez utiliser uni.getSystemInfoSync().networkType pour vérifier l'état du réseau avant de faire la demande ou de gérer les erreurs de réseau spécifiquement dans le rappel fail .
• Essayez ... Catch Blocks: Bien que moins courant avec uni.request qui fournit déjà des rappels, vous pouvez envelopper l'appel uni.request dans un bloc try...catch Block pour attraper des erreurs inattendues qui pourraient se produire en dehors de la demande elle-même (par exemple, des erreurs d'analyse JSON).
• Gestion des erreurs génériques: fournissez un message d'erreur générique à l'utilisateur si l'erreur spécifique n'est pas claire ou trop technique. Enregistrez les détails d'erreur complets à des fins de débogage.

Exemple avec vérification du code d'état:

 <code class="javascript">uni.request({ // ... request options ... fail: (err) => { if (err.statusCode === 404) { uni.showToast({ title: 'Resource not found', icon: 'error' }); } else if (err.statusCode === 500) { uni.showToast({ title: 'Server error', icon: 'error' }); } else { uni.showToast({ title: 'An error occurred', icon: 'error' }); console.error('Request failed:', err); } } });</code>

Comment puis-je intégrer Uni.Request au système d'authentification de mon projet Uni-App?

L'intégration uni.request à un système d'authentification implique généralement l'ajout d'un en-tête d'autorisation à chaque demande. Cet en-tête contient généralement un jeton (JWT, ID de session, etc.) qui identifie l'utilisateur authentifié.

Mise en œuvre:

1. Stockage de jetons: Stockez en toute sécurité le jeton d'authentification (par exemple, dans le stockage d'Uni-App à l'aide d' uni.setStorageSync et uni.getStorageSync ).
2. Injection d'en-tête: avant de faire chaque demande, récupérez le jeton et ajoutez-le à l'objet header :

 <code class="javascript">const token = uni.getStorageSync('token'); uni.request({ url: 'https://api.example.com/protected-data', header: { 'Authorization': `Bearer ${token}` // Adjust as needed for your auth scheme }, success: (res) => { // ... }, fail: (err) => { // Handle authentication errors (eg, 401 Unauthorized) if (err.statusCode === 401) { // Redirect to login or refresh token } } });</code>

3. Rafraîchissant à jetons: implémentez le token rafraîchissant si votre système d'authentification utilise des jetons de courte durée. Vérifiez l'expiration du jeton et actualisez-la automatiquement avant son expiration. Cela implique généralement de faire une demande distincte à un point de terminaison de rafraîchissement du jeton.
4. Gestion des erreurs: gérer les erreurs d'authentification (comme 401 non autorisées). Cela peut impliquer la redirection de l'utilisateur vers la page de connexion ou les inciter à réapparaître.

Puis-je utiliser Uni.Request pour télécharger des fichiers dans mon projet Uni-App?

Oui, uni.request peut télécharger des fichiers, mais il nécessite l'utilisation de l'API formData . Voici comment:

Mise en œuvre:

1. Créez FormData: créez un objet FormData et ajoutez-y le fichier. Vous devrez accéder au fichier à l'aide de l'API de sélection de fichiers Uni-App appropriée (par exemple, uni.chooseImage ou uni.chooseVideo ).
2. Définissez le type de contenu: définissez l'en-tête Content-Type sur multipart/form-data .
3. Envoyez la demande: Envoyez une demande de message avec l'objet FormData comme data .

Exemple:

 <code class="javascript">uni.chooseImage({ count: 1, success: (res) => { const filePath = res.tempFiles[0].path; const formData = new FormData(); formData.append('file', { uri: filePath, name: 'file.jpg', // Adjust filename as needed type: 'image/jpeg' // Adjust file type as needed }); uni.request({ url: 'https://api.example.com/upload', method: 'POST', header: { 'Content-Type': 'multipart/form-data' }, data: formData, success: (res) => { // ... }, fail: (err) => { // ... } }); } });</code>

N'oubliez pas d'ajuster les propriétés name et type en fonction de votre fichier téléchargé. Le côté serveur doit être configuré pour gérer les téléchargements multipart/form-data . Envisagez également d'utiliser un indicateur de progression pour afficher les progrès de l'utilisateur pour une meilleure expérience utilisateur, ce qui nécessite généralement une approche différente au-delà de la uni.request .

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!