web-dev-qa-db-ja.com

Vue.jsでのaxios呼び出しの非同期/待機

私はこれを設定するのに少し苦労しています。 Vue.jsアプリケーション内の値。私は非同期axios呼び出しを正しく理解していないか、Vue.js内で非同期がどのように機能するかを信じています。

次の3つの方法があります。

_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;
}
_

_response.data.message_はフレームワークからTrue/trueとして返されていますが、await this.handleAvailabilityRequest()関数からは何も返さないようです。ロギングは私が望むすべてを示しているので、投稿は間違いなくサーバーにヒットします-その後、json応答コンテキストでmessage = trueを返します。

だから、私は推測する...助けて！約束を待つことの問題である以外に、これがなぜ機能しないのかについて完全にd然としている...

javascriptasynchronousvue.jsasync-awaitaxios
8
GCien

問題はここにあります：

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);
});

本格的なfunctionを使用しているため、thisは.thenは、インスタンス化されたオブジェクトを参照しません。代わりに矢印関数を使用して、thisが外部スコープから継承されるようにします。

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

非同期待機を使用している場合、Promisesパターンを使用する理由。これにより、コールバックとthisバインディングの使用が失われます

このようにできます

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;
}

try/catchを使用する場合、async/awaitブロックを使用してエラーを処理できます。

8
Vamsi Krishna