J'essaye d'afficher dans localstorage les valeurs que j'obtiens de mon api en cliquant sur un bouton. Mais il semble que la valeur ne soit pas affichée, mais l'appel de l'API a été effectué, ma valeur n'est pas définie, je dois donc cliquer une deuxième fois sur le bouton pour que ma valeur soit affichée.

Il y a mon code:

<template>
  <div class="container">
    <h1>SignIn</h1>
    <div class="overlay-container">
      <form>
        <div class="form-group">
          <input
            type="text"
            class="form-control"
            placeholder="First name"
            
            id="FirstName"
          />
        </div>
        <div class="form-group">
          <input
            type="text"
            class="form-control"
            placeholder="Last name"
            id="Lastname"
          />
        </div>
        <div class="form-group">
          <input
            type="email"
            class="form-control"
            placeholder="Email"
            id="exampleInputEmail1"
            aria-describedby="emailHelp"
          />
        </div>
        <div class="form-group">
          <input
            type="password"
            placeholder="Password"
            class="form-control"
            
            id="exampleInputPassword1"
          />
        </div>
       <button @click="signIn" type="button" class="btn btn-primary">Sign In</button>
      </form>
       
      
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import VueAxios from 'vue-axios'

export default {
  name: "Signin",
  data(){
    return {
      userName:'',
      userid:''
    }
  },
  methods:{
    signIn(){
      axios.get(`http://localhost:4000/api/users/2`)
                .then(Response => this.userid = Response.data.data.id);
      axios.get(`http://localhost:4000/api/users/2`)
                .then(Response => this.UserName = Response.data.data.fname);          
      localStorage.userid = this.userid;
      localStorage.UserName = this.UserName;
    }
  }
};
</script>

Une capture d'écran: Premier CLIC | Deuxième clic

Avez-vous une idée de quel est le problème?

0
kehalS 29 oct. 2020 à 22:43

4 réponses

Meilleure réponse

Cela devrait fonctionner. https://www.w3schools.com/jsref/met_storage_setitem.asp

async signIn() {
  await axios.get(`http://localhost:4000/api/users/2`)
       .then(Response => this.userid = Response.data.data.id);
  await axios.get(`http://localhost:4000/api/users/2`)
       .then(Response => this.UserName = Response.data.data.fname);          
  localStorage.setItem('userid', this.userid);
  localStorage.setItem('UserName', this.UserName);
}

1
Prime 29 oct. 2020 à 19:53

Les valeurs de vos appels API ne sont disponibles que dans la fonction .then. Donc, ce qui se passe, c'est que vous définissez directement les clés / valeurs sur localStorage, avant que la promesse renvoyée par axios.get ne soit résolue.

La raison pour laquelle vous ne voyez les valeurs reflétées dans localStorage qu'après le deuxième clic a à voir avec les promesses et l'ordre d'exécution. La première fois que vous cliquez sur le bouton, vous envoyez deux requêtes GET, puis vous mettez immédiatement à jour localStorage avec this.userid / this.UserName, qui sont toujours des chaînes vides. Une fois l'exécution de cette fonction terminée, la promesse de axios.get se résout et les valeurs de this.userid / this.UserName sont mises à jour par la fonction .then. La deuxième fois que vous cliquez sur le bouton, les valeurs localStorage sont mises à jour avec les valeurs de this.userid / this.UserName précédemment définies.

Gardez également à l'esprit que vous devez utiliser localStorage.setItem('key', 'value') au lieu de localStorage.key = 'value'.

En bout de ligne, vous devez déplacer le code qui stocke les paires clé / valeur dans localStorage à l'intérieur de .then.

1
Ethan Lipkind 29 oct. 2020 à 19:54

Vous n'attendez pas que l'ajax (xhr) se termine avant d'enregistrer les valeurs dans le stockage local. .then est la fonction appelée une fois que le xhr est terminé, donc votre code pour enregistrer les valeurs dans le stockage local doit être à l'intérieur .then

axios.get(`http://localhost:4000/api/users/2`)
            .then(function(Response) {
                    this.userid = Response.data.data.id
                    localStorage.setItem('userid', this.userid);
                    this.UserName = Response.data.data.fname
                    localStorage.setItem('UserName', this.UserName);
            });
  

Étant donné que vos deux appels d'API sont destinés au même point de terminaison, je les ai également combinés en un seul.

À propos du clic sur le bouton:

Si vous avez besoin d'afficher des données lors d'un clic, vous ne devez autoriser le clic qu'après réception des données de l'appel API. Pour ce faire, vous pouvez désactiver le bouton jusqu'à ce que .then soit terminé. Et puis réactivez-le.

       //**button is disabled when page loaded** 
       axios.get(`http://localhost:4000/api/users/2`)
            .then(function(Response) {
                    this.userid = Response.data.data.id
                    localStorage.setItem('userid', this.userid);
                    this.UserName = Response.data.data.fname
                    localStorage.setItem('UserName', this.UserName);
                    //**enable button here**
            });

Maintenant, le fait que vous appelez votre API même lorsque les données sont stockées dans le stockage local:

Je suppose que vous stockez les données dans localstorage afin que vous n'ayez pas à faire un autre appel pour les récupérer à nouveau. Mais actuellement, votre code effectue toujours l'appel d'API même lorsque les données sont déjà présentes dans le stockage local. Vous pouvez le réparer comme ceci:

//**button is disabled when page loaded** 
methods:{
    signIn(){

      var uId = localStorage.getItem('userid');
      var uName = localStorage.getItem('UserName');
      if(uId && uName) {
         //**enable button here**
      }
    }
    getData() {
        axios.get(`http://localhost:4000/api/users/2`)
            .then(function(Response) {
                    this.userid = Response.data.data.id
                    localStorage.setItem('userid', this.userid);
                    this.UserName = Response.data.data.fname
                    localStorage.setItem('UserName', this.UserName);
                    //**enable button here**
            });
      }
  }

Appelez getData lorsque votre page se charge, puis activez le bouton. Ainsi, lorsque le bouton est cliqué, les données sont disponibles!

1
Himanshu Tyagi 29 oct. 2020 à 20:04

1.) Essayez onclick au lieu de @click. 2.) Enregistrez dans la console les données que vous avez reçues de localhost: 4000

0
cs641311 29 oct. 2020 à 19:48