web-dev-qa-db-fra.com

Non pris (promis)

Je sais que le problème est habituel. J'utilise es6 promesses et j'ai plusieurs couches. Lors de l'exécution, lorsque je n'attrape aucune promesse, j'ai Uncaught (in promise) dans ma console. Mais le fait est que je le vois moins dans mon code.

Exemple simplifié rapide:

LoginApi.js

var loginDaoCall = loginDao.login(username, password);

loginDaoCall
    .then(function (res) {
        store.dispatch(loginSuccess());
        log.log("[loginApi.login] END");
    })
    .catch(function (err) {
        store.dispatch(loginFail());
        errorUtils.dispatchErrorWithTimeout(errorLogin);
        log.log(err);
    });

return loginDaoCall;

loginContainer.js 

loginApi.login(user, password).then(() => {
    // Change here instead of in render so the user can go back to login page
    this.props.history.Push(baseUrlRouter + "test");
}); // <- Error here cause I don't CATCH the promise, but I do catch it in my loginapi.js

Je sais que je pourrais attraper ne rien faire, mais hein. Je pourrais aussi faire l'historique Push dans ma couche API, mais ce n'est pas sa responsabilité.

Comment puis-je éviter l'erreur dans ma console? Y a-t-il un moyen? Je pense même à le laisser comme ça.

javascriptreactjspromise
5
Nevosis

Votre problème est que vous avez été returning la loginDaoCall rejetée, pas la promesse où l'erreur a déjà été traitée. loginApi.login(user, password) a effectivement renvoyé une promesse refusée et, même si elle a été gérée dans une autre branche, la promesse renvoyée par la .then() suivante est également rejetée et n'a pas été gérée.

Vous voudrez peut-être faire quelque chose comme

// LoginApi.js
return loginDao.login(username, password).then(function (res) {
    store.dispatch(loginSuccess());
    log.log("[loginApi.login] END");
    return true;
}, function (err) {
    store.dispatch(loginFail());
    errorUtils.dispatchErrorWithTimeout(errorLogin);
    log.log(err);
    return false;
}); // never supposed to reject


// loginContainer.js
loginApi.login(user, password).then(success => {
    if (success) {
        // Change here instead of in render so the user can go back to login page
        this.props.history.Push(baseUrlRouter + "test");
    }
});
1
Bergi

Il semble que vous ayez une erreur dans votre bloc catch. Lorsque l'erreur est générée, il n'y a pas de 2e bloc catch pour attraper l'erreur dans le 1er bloc.

Réparer ...

.then(function (res) {
    // some code that throws an error
})
.catch(function (err) {
    // some code that throws an error
})
.catch(function (err) {
    // This will fix your error since you are now handling the error thrown by your first catch block
    console.log(err.message)
});
1
danday74