v2.5.2
Giriş yap

Axios yanıt dönene kadar bekletme

selcuk
471 defa görüntülendi

Merhaba,
axios dan yanıt dönene kadar functionu bekletmenin bir yolu var mı?
await test(); maalesef yapamıyoruz. İstek dışardan atılıyor.

window['test'] = async function(event) {
    await axios.post('/test').then(result => {
        console.log("await ok");
    });
};
test();
console.log("abc");

İstiyorum ki; test içerisindeki axios dan yanıt dönene kadar sonraki işlemlere geçmesin.
Bunu query ajax isteği ile yapabiliyorum.

window['test'] = function(event) {
    $.ajax({
        url: '/test',
        type: 'POST',
        async: false,
        dataType: 'json',
        success: function(result) {
            console.log("test ajax");
        }
    });
};
test();
console.log("abc");

axios ile yapamazmıyım ?

Cevap yaz
Cevaplar (6)
ebykdrms
787 gün önce

Denemedim ama stackoverflow.com/nasıl-senkron-http-istek-atabiliriz sorusuna verilen şu cevap iş görebilir:

Doğru kabul edilen cevap şu şekilde yazılmış:
open() fonksiyonundaki 3. parametre asenkron istek göndermek içindir. Senkron istek atmak için false olarak ayarlayabilirsin.

function handleButtonPress(e) { 
    var httpRequest = new XMLHttpRequest(); 
    httpRequest.onreadystatechange = handleResponse; 
    httpRequest.open("GET", e.target.innerHTML +  ".html", false); 
    httpRequest.send(); 
} 

Siz XMLHttpRequest sınıfını kendi isteğinize göre kullanarak istek oluşturabilirsiniz.

selcuk
787 gün önce

Öncelikle teşekkür ederim yardımınız için, başka arkadaşlar için örnek çalışmamı iletiyorum.

window['test'] = function(event) {
    var xhr = new XMLHttpRequest();
    
    xhr.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            const result = JSON.parse(this.response);
            console.log(result);
        }
    }

    xhr.open(method, url, async);
    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
    xhr.send(params);

    /* Örnek xhr.open('POST', '/servis_linki', false); async false giderse yanıtın dönmesi bekleniyor */
};
test();
console.log('test den sonra calıstım');
selcuk
787 gün önce

İstek dışardan yapıldıgı için, bir sonraki fonksiyonda dısardan calısıyor. fetch ile bi çözümü var mı hocam yada sizin tavsiyeniz. jquery ajax async: false özelliği tam işimi görüyor ama jquery kütüphanesini sadece bu işlem için çekmek istemiyorum

ebykdrms
787 gün önce

Axios'un senkron desteği yok. Axios mutlaka Promise dönmek üzere tasarlandı. Axios'u senkron yapmanın yolu olarak sizin de aklınıza gelmiş olabilecek yollardan başka bir yol yok.
Axios isteğinden sonra çalışacak tüm işlemleri bir fonksiyon içine alabilir ve axios'tan yanıt geldiğinde bu fonksiyonu çağırabilirsiniz.
Eğer kodunuz buna uyum sağlayamayacaksa axios'tan başka çözüm yollarına gitmelisiniz.

selcuk
787 gün önce

Maalesef hocam benim istediğim, axios post edildikten sonra yanıt gelene kadar, sonraki hiç bir functionu çalıstırmamalı.
test() den sonra test2() var mesela. test içindeki axios dan yanıt döndükten sonra test2() ye devam edecek

qplot
787 gün önce

Çok hakim değilim ama böyle bir mantık olabilir gibi

new Vue({
  el: '#app',
  data () {
    return {
      info: null,
      loading: true,
      errored: false
    }
  },
  filters: {
    currencydecimal (value) {
      return value.toFixed(2)
    }
  },
  mounted () {
    axios
      .get('https://api.coindesk.com/v1/bpi/currentprice.json')
      .then(response => {
        this.info = response.data.bpi
      })
      .catch(error => {
        console.log(error)
        this.errored = true
      })
      .finally(() => this.loading = false)
  }
})


<div v-if="loading">Loading...</div>