3
votes

React Class comment renvoyer un booléen après un appel de récupération de promesse

bonjour j'ai cette classe quand j'appelle Auth.isAuthenticated () depuis un autre composant dans react, elle retourne toujours false (c'est la valeur par défaut), même si le serveur renvoie une réponse 200, la sorcière définit this.authenticated = true. comment utiliser les promesses pour faire attendre la méthode jusqu'à ce que l'appel de récupération soit terminé, puis renvoyer le résultat

Modifier: J'ai besoin que le booléen true ou false soit retourné, donc en fonction de cela, je peux afficher ou masquer le composant, toutes les réponses sont utiles mais j'ai besoin d'un booléen pas une promesse d'aide s'il vous plaît

export const PrivateRoute = ({ component: Component, ...rest }) => {

  return (
    <Route {...rest} render={(props) => (
      Auth.isAuthenticated() === true
        ? <Component {...props} />
        : <Redirect to='/admin' />
    )} />
      )
}

et à partir d'un autre composant, j'appelle Auth.isAuthenticated () === true

    class Auth {
    constructor() {
        this.authenticated = false;
    }


    isAuthenticated() {
        //get token from local storage if there is one
        const jwttoken = localStorage.getItem('jwttoken');
        const bearer = 'Bearer ' + jwttoken;
        const data = new FormData();
        // get the website backend main url from .env
        const REACT_APP_URL = process.env.REACT_APP_URL
        fetch(`${REACT_APP_URL}/api/auth/verify`, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Authorization': bearer,
            },
            body: data
        }).then(
            (response) => {
                response.json()
                    .then((res) => {
                        if (response.status === 200) {
                            this.authenticated = true;
                        }
                        if (response.status === 401) {
                            localStorage.removeItem('jwttoken');
                            this.authenticated = false;
                        }
                    })
            }
        ).catch((err) => {
            // console.log(err)
        });

        return this.authenticated;
    }


}



export default new Auth();

javascript reactjs es6-promise

0 commentaires

3 Réponses :

0
votes

utilisez await async

async isAuthenticated() {
        //get token from local storage if there is one
        const jwttoken = localStorage.getItem('jwttoken');
        const bearer = 'Bearer ' + jwttoken;
        const data = new FormData();
        // get the website backend main url from .env
        const REACT_APP_URL = process.env.REACT_APP_URL
        const response = await fetch(`${REACT_APP_URL}/api/auth/verify`, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Authorization': bearer,
            },
            body: data
        });

        const responseToJson = await response.json();

         if (responseToJson.status === 200) {
             this.authenticated = true;
         }
         if (responseToJson.status === 401) {
             localStorage.removeItem('jwttoken');
             this.authenticated = false;
         }

       return this.authenticated;
    }

3 commentaires

@Alexander merci, mais je reçois une promesse mais j'ai besoin d'un booléen

@Rida I mon cas, vous devriez obtenir un booléen, pas une promesse

@AlexandrZavalii il renverra toujours une promesse

2
votes

Si vous ne voulez pas faire async / wait , vous pouvez demander à isAuthenticated de renvoyer une promesse.

isAuthenticated() {
  return new Promise((resolve, reject) => {
    //get token from local storage if there is one
        const jwttoken = localStorage.getItem('jwttoken');
        const bearer = 'Bearer ' + jwttoken;
        const data = new FormData();
        // get the website backend main url from .env
        const REACT_APP_URL = process.env.REACT_APP_URL
        fetch(`${REACT_APP_URL}/api/auth/verify`, {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Authorization': bearer,
            },
            body: data
        }).then(
            (response) => {
                response.json()
                    .then((res) => {
                        if (response.status === 200) {
                            resolve(true)
                        }
                        if (response.status === 401) {
                            localStorage.removeItem('jwttoken');
                            resolve(false)
                        }
                    })
            }
        ).catch((err) => {
            // reject(err)
        });
  })        
}

Et dans un fonction async que vous pouvez faire let isAuthenticated = attendre isAuthenticated () ou vous pouvez utiliser .then et .catch en dehors de la fonction async pour renvoyer le résultat

0 commentaires

5
votes

Supposons que vous souhaitiez écrire une fonction qui renvoie une promesse et se résout à la fin d'une action (un appel API par exemple). Vous pourriez écrire quelque chose comme ceci:

const sideEffects = async () =>{
    const result = await myAsyncFunction()
    console.log(result) //'data'
}

Et voilà! Vous avez maintenant une fonction qui renvoie une promesse qui se résoudra en 400 ms. Vous devez maintenant utiliser la méthode .then () ou les instructions async await .

const myAsyncFunction = () =>{
    return new Promise((resolve, reject) =>{
        //Faking an API Call
        setTimeout(() => resolve('data'), 400)
    })
}

0 commentaires