Que dois-je faire si « Erreur non interceptée (promise) : échec de la demande avec le code d'état 400 » se produit lors de l'utilisation d'axios dans une application Vue ?

En utilisant axios comme cadre de requête réseau dans les applications Vue, le traitement des données implique généralement de communiquer avec l'API backend. Cependant, dans certains cas, nous pouvons rencontrer une erreur, par exemple « Erreur non interceptée (promise) : la demande a échoué avec le code d'état 400 ». Cette erreur se produit généralement lors de la demande d'une API, indiquant que la demande a été envoyée, mais que le serveur ne peut pas traiter la demande en raison d'un format de données incorrect ou de paramètres incorrects.

Comment gérer cette erreur ? Ci-dessous, nous aborderons quelques solutions possibles.

1. Vérifiez l'URL et les paramètres de la demande API

Tout d'abord, nous devons vérifier l'URL et les paramètres de la demande API pour nous assurer qu'ils répondent aux exigences de l'API. Ce problème est généralement dû à des paramètres incorrects ou à des URL incorrectes fournies lors de la demande d'API, empêchant le serveur de traiter la demande.

Vous pouvez utiliser les outils de développement du navigateur Chrome pour afficher l'URL et les paramètres demandés afin de vérifier s'ils sont corrects.

2. Définissez le fichier d'en-tête de requête axios

Dans les applications Vue, nous utilisons généralement le plugin axios pour envoyer des requêtes HTTP. Si vous devez définir des paramètres spécifiques ou des fichiers d'en-tête dans l'en-tête de requête lors de la demande de l'API, nous devons nous assurer que l'en-tête de requête est correctement défini dans le plugin axios.

axios.defaults.headers.common['Authorization'] = 'Bearer' + token;

Dans le code ci-dessus, nous définissons un en-tête de requête pour attacher le jeton Bearer à l'autorisation.

3. Envoyez le format de données correct lors de la demande de l'API

Dans les applications, le type de données que nous connaissons est JSON. Lors du traitement des données dans une application Vue, nous devons nous assurer que les données sont envoyées au serveur au format JSON. Si nous envoyons des données dans d'autres formats (par exemple, des données de formulaire ou des données au format XML), le serveur peut renvoyer une erreur 400.

Utilisez les en-têtes Content-Type: application/json pour vous assurer que les données sont envoyées au format JSON. Voici un exemple d'envoi d'objets de données à l'API backend au format JSON.

let data = { nom : 'John', âge : 30 };
axios.post('/api/user', JSON.stringify(data), { headers : { 'Content-Type' : 'application/json ' } });

4. Détecter les erreurs et afficher les messages d'erreur

Nous pouvons utiliser l'intercepteur de réponse axios pour capturer les erreurs et afficher les messages d'erreur. Dans une application Vue, nous pouvons créer une instance axios dans le fichier main.js et ajouter un intercepteur de réponse.

Dans l'extrait de code suivant, nous avons ajouté un intercepteur de réponse sur l'instance axios. Lorsqu'une erreur de requête se produit, le gestionnaire d'erreurs de l'intercepteur de réponse est appelé et le message d'erreur s'affiche.

importer axios depuis 'axios';
importer Vue depuis 'vue';

let instance = axios.create({
baseURL: 'http://localhost:3000',
timeout: 30000
});

instance.interceptors.response.use(function (response) {
return réponse;
}, function (erreur) {
Vue.prototype.$message.error(error.message);
return Promise.reject(error);
});

Dans l'extrait de code ci-dessus, nous avons utilisé l'instance $message de Vue pour afficher le message d'erreur.

Résumé

Dans les applications Vue, nous utilisons généralement axios comme bibliothèque de requêtes réseau. Lors de la demande de l'API, nous pouvons rencontrer l'erreur « Erreur non capturée (dans la promesse) : la demande a échoué avec le code d'état 400 ». Cette erreur indique généralement que nous devons vérifier l'URL, les paramètres, les en-têtes de requête et le format des données de la requête API.

Lors de la résolution de ce problème, nous pouvons résoudre le problème en vérifiant l'URL et les paramètres de la requête API, en définissant le fichier d'en-tête de requête d'axios, en envoyant le format de données correct, en détectant l'erreur et en affichant le message d'erreur.

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!