web-dev-qa-db-fra.com

Meilleures pratiques de gestion des erreurs dans Vuejs avec Vuex et Axios

J'utilise Vuex + axios, je veux connaître les meilleures pratiques de gestion des erreurs pour vuex + axios. Ce que je fais maintenant, c'est que lorsque je demande à utiliser axios et qu'il renvoie une erreur, il sera validé en mutation et mettra à jour mon état. Ce que je veux faire, c'est s'il y a une erreur de réponse à ma demande, elle reviendra à mon composant afin que je puisse gérer l'erreur beaucoup plus rapidement.

Comme en angulaire, il y a une injection de dépendance et la réponse reviendra au composant.

vue.jsaxiosvuex
10
LordGrim

Prenez votre gâteau et mangez-le aussi. En supposant que vous utilisez déjà un intercepteur ...

axios.interceptors.response.use(function (response) {
  return response;
}, function (error) {
  store.commit('ERROR', error) // just taking some guesses here
  return Promise.reject(error) // this is the important part
})

Cela gardera le rejet de la promesse de retour à l'appelant donc dans votre composant, quelque chose comme ...

axois.whatever(...).then(res => {
  // happy days
}, err => {
  // oh noes!
})
15
Phil

Permettez-moi de vous dire l'approche que j'ai utilisée pour la journalisation des erreurs est la suivante. Par cela, vous pouvez gérer toutes les erreurs vue par sur le code. 

window.onerror = function (message, source, lineno, colno, error) {
  /// what you want to do with error here
};

Il s'agit d'un gestionnaire d'erreurs global pour le navigateur. Si aucune erreur n'est détectée, cela peut être géré par cela.

Aussi si vous voulez gérer votre erreur. Vous pouvez faire comme ça.

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
      // when you throw error this will also fetch error.
       throw error;
  });

Si vous voulez regarder vue pour la gestion des erreurs, vous pouvez opter pour. https://vuejs.org/v2/api/#errorHandler

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
  // `info` is a Vue-specific error info, e.g. which lifecycle hook
  // the error was found in. Only available in 2.2.0+
}

Permettez-moi de vous donner un lien où window.onerror est utilisé

https://github.com/stacktracejs/stacktrace.js/

5
Himanshu sharma

J'en suis venu à la conclusion qu'ils ne peuvent pas toujours exister des méthodes générales de gestion des erreurs, ils doivent donc être en quelque sorte couplés au contexte. C'est une bonne chose d'avoir des fichiers api séparés, mais médiez cela avec la mention ci-dessus. J'ai des fichiers api séparés et je fais ce qui suit:

//comments-api.js
export default {
    get (url, handler){
        //return the promise to further possible chains
        return axios.get(url)
            .then( response => handler.success(response.data) )
            .catch( error => handler.serverDownOrUnexpected(error.response) )
    },
}
//comments.js - vuex module
import $comments from './../../services/api/comments-api'
...
actions: {
    $comments.get(url, {
        success: (data) => commit('success_handler', data),
        serverDownOrUnexpected: (error) => commit('unexpected', error)
        //so on...
    })
}
...

dans cette approche, chaque fois que je veux changer la façon dont certaines erreurs sont traitées, je dois apporter des modifications au même endroit, plus les avantages du code découplé.

0
Botea Florin

Le pouvoir des promesses! (plus async/attente)

méthode vue (mycomponent.js)

async YourAsyncMethod() {
    const payload = {key: "var"}
    const result = await axios
        .post('/your/api/endpoint', payload)
        .catch(e => {
            console.log(e.message)
        });
}

yourMethod() {
    // start axios logic
    const payload = {key: "var"}
    axios
        .post('/your/api/endpoint', payload)
        .then(response => {
            console.log(response.data)

            // start state action logic
            this.$store
                .dispatch('yourAction', payload)
                .then(add => {
                    console.log('success mutation!');
                })
                .catch(error => {
                    // error = Error object,
                    console.log('error mutation:',error.message);
                    console.log(error) // to se full error object
                });
        })
        .catch(error => {
            console.log('error axios request', error.data)
        });
}

avec les actions d'état (store/actions.js)

yourAction(){
    const some_logic = false;
    if (!some_logic) {
        // when return a Promisse.reject
        //you can get error with catch(e) from youtMethod
        return Promise.reject(new Error("Impressora já adicionada"))
    }
    context.commit('MUTATION_METHOD', payload);
}

avec axios

http
    .post('/your/api/endpoint', payload)
    .then(response => {
        console.log(response.data)
    })
    .catch(error => {
        console.log('error', error.data)
    });
0
Leonardo Filipe