Vue-resource: How to use this.$http.post syncronously, not async?

[Danjavia]

[jorgemurta]

+1

[jnggao]

+1

[genhoi]

+1

[steffans]

Syncronous request are deprecated and have negative effects to the user experience, because the browser becomes unresponsive (see MDN). Normally you can accomplish everything using the asynchronous request and the returned promises.

[kirkbushell]

just return the promise, and work with success/fails in your business domain.

[amirrustam]

There is really no point to a synchronous request since you can't get around waiting for a response. As @steffans and @kirkbushell said, work withe promises to get the desired effect.

@Danjavia I think this issue can be closed out, unless you have something else to add.

[Danjavia]

Thanks guys. But you cannot understand me :)

[smolinari]

Then explain yourself better or at least try.

Scott

[Danjavia]

Thx again guys, the issue was solved using other method :)

[zhipu77]

@Danjavia So what the method to solved this issue.

@steffans This exactly is a trouble in my project. Use promise is not a easy way to deal with multi requests. So I want to package the requests but without sync method.

[Yiin]

I'd like to open another tab with payment url after reservation is created successfully, and appearently it's not possible without sending request syncronously, because window.open(url, '_blank'); needs to be called on actual click event.

[audiolion]

there is good reason for that, if any arbitrary javascript could open a new tab on the user's web browser and put in any url, imagine how abusive that could be.

What you can do here is use a small single-page-application interface where the returned promise redirects to a new router url which calls and renders a new component on the page, e.g. your payment success, in the interim you can show a modal with a spinner.

Rather than try to do something that creates an awful user experience, (synchronous requests), I would redesign your approach to solving the problem of navigating to the reservation screen.

[ivpal]

+1
Chrome block window.open(url, '_blank')

[hermandinho]

+1

[DomenicRoti]

+1

[wenjie-rb2]

+1

[michaelcouck]

+1

I need the data loaded before the page loads or the population of the elements do not get styled correctly.

The argument that it interferes with UX has no grounds, if the page loads before the data there is nothing for the user to see anyway, ergo, load the data first. And indeed if the data load fails, then once again there is nothing for the user to see. The data load and page render are a single atomic unit of work.

Hence, please add a synchronous get/post call, and I will be a very happy camper ;)

[adolphlwq]

+1

[mrzorn]

+1 exactly for the reasons that @michaelcouck specified.

[lengyuedaidai]

+1

[kravemir]

+1

[guizordan]

+1

[andreixk]

+1

[fenixrw]

@michaelcouck I think the issue you pointed out can be solved another way. You can use a loading variable to switch the page render from a loading page to the actual page when the request finishes.

HTML

<div id="app">
  <div v-if="loaded">
    <p>{{ message }}</p>
    <!-- RENDER YOUR PAGE HERE -->
  </div>
  <div v-else>
    <p>Loading</p>
    <!-- RENDER LOADING PAGE -->
  </div>
</div>

JS

new Vue({
  el: '#app',
  data: {
    loaded: false,
    message: 'Hello Vue.js!'
  },
  methods:
  {
    loadPage: {
      // POST /someUrl
      this.$http.post('/someUrl', {foo: 'bar'}).then(response => {
        //success callback
        this.loaded = true;
      }, response => {
        // error callback
      });
    }   
  }
})

Marking everyone that +1 after michaelcouck's comment. Might be usefull to you guys too ;)
@mrzorn @lengyuedaidai @adolphlwq @zeidanbm @kravemir @billzee @andreixk

[octave]

+1 Shopify JavaScript API requires to queue up Ajax requests synchronously: https://help.shopify.com/themes/development/getting-started/using-ajax-api#add-to-cart

[clockworked247]

I'm going to pile on here with another +1 with what I believe is a valid use case for synchronous.

I have a formerly jQuery single page app that I'm porting to Vue web app that saves state to the server when the browser is closed using 'beforeunload'. When using jQuery you could set the synchronous flag on an $.ajax request making a blocking call that would complete before the page unloaded.

Since I'm now using vue-resource to handle this same request on 'beforeunload', which is now asynchronous, the request to the server will be terminated by the client without completing the save to the server.

So right now, without a synchronous flag, I will need to write my own vanilla JS ajax request method just for this use case, which is not ideal.

[shozayen]

+1

[truefusion]

For modern browsers that support await, the following should work since it returns a promise:
var rsp = await this.$http.post('/some-url', {some: 'data'});