web-dev-qa-db-fra.com

Async / attend les appels axios avec Vue.js

J'ai un peu de mal à régler l'un de mes problèmes. valeurs dans mon application Vue.js. Je crois que je ne comprends pas correctement les appels asynchrones axios ou bien comment async fonctionne dans Vue.js.

J'ai les trois méthodes suivantes:

updateAvailability(availability) {
    if (availability == true) {
        this.showYourDetails();
    } else {
        this.showBookingDetails();
    }
},
checkAvailability: async function(event) {
    event.preventDefault();
    const availability = await this.handleAvailabilityRequest(event);
    this.loading = true;
    console.log(availability); //This evaluates to undefined
    const availabilityUpdate = await this.updateAvailability(availability);
    this.loading = false;
},
handleAvailabilityRequest: async function(event) {
    event.preventDefault();
    let valid = this.validateFieldsForAvailabilityRequest(); //Ignore this for this particular question, assume valid is always true

    if (valid) { // This is true
        let config = {
            headers: {
                "X-CSRFToken": this.csrfToken,
                "Content-Type": 'application/x-www-form-urlencoded',
            }
        }

        let formData = new FormData();
        let reservationTime = this.reservationHourSelected + ':' + this.reservationMinuteSelected;

        formData.set('type', 'availability_request');
        formData.set('session_name', this.sessionName);
        formData.set('reservation_party_size', this.reservationPartySize);
        formData.set('reservation_date', this.reservationDate);
        formData.set('reservation_time', reservationTime);

        await axios.post('{{ request_absolute_uri }}', formData, config).then(function(response) {
            this.availabilityMessage = response.data.message;
        }).catch(function(error) {
            this.availabilityMessage = false;
            console.log(error);
        });
    }
    return this.availabilityMessage;
}

Mon response.data.message Est renvoyé de mon framework en tant que True/true, mais il semble que je ne renvoie rien de la fonction await this.handleAvailabilityRequest()? La publication frappe définitivement le serveur car la journalisation montre tout ce que je veux - puis retourne message = true dans un contexte de réponse json.

Alors, je suppose ... aidez-moi! Complètement abasourdi quant à savoir pourquoi cela ne fonctionne pas si ce n’est un problème pour attendre la promesse ...

javascriptasynchronousvue.jsasync-awaitaxios
8
GCien

Le problème est ici:

await axios.post('{{ request_absolute_uri }}', formData, config).then(function(response){
  this.availabilityMessage = response.data.message;
}).catch(function (error) {
  this.availabilityMessage = false;
  console.log(error);
});

Parce que vous utilisez un function à part entière, votre this à l'intérieur du .then ne fait pas référence à l'objet instancié. Utilisez plutôt une fonction de flèche pour que le this soit hérité de la portée externe:

await axios.post('{{ request_absolute_uri }}', formData, config)
.then((response) => {
  this.availabilityMessage = response.data.message;
}).catch((error) => {
  this.availabilityMessage = false;
  console.log(error);
});
12
CertainPerformance

Pourquoi utiliser le modèle de promesses si vous utilisez async attendre. Cela supprime l'utilisation des rappels et de la perte de la liaison this

Tu peux le faire comme ça

handleAvailabilityRequest: async function (event) {
  event.preventDefault();
    ...

  try{
   let response =  await axios.post('{{ request_absolute_uri }}', formData, config)
      this.availabilityMessage = response.data.message;
  }catch(error) {
      this.availabilityMessage = false;
      console.log(error);
    };
  }
  return this.availabilityMessage;
}

Vous pouvez utiliser try/catch bloc pour la gestion des erreurs lors de l'utilisation de async/await

8
Vamsi Krishna