Vue-resource: [Help needed] Using promise in vue-resource

Created on 1 Jul 2016  路  6Comments  路  Source: pagekit/vue-resource

Hi, Thanks for your help and reading this:

I am trying to make two api calls and then combine the results together.

Here is my current approach using Promise.all, In the feature, it says ' Support Promise API' , what does it mean? Could you kindly show an example how to do it with Vue-resource. Thanks vey much!

var promise1 = new Promise((resolve, reject) => {
    Vue.http.get('url1').then((response) => {
      resolve(response.json())
    }, (response) => {
      reject(response.status)
    })
  })
  var promise2 = new Promise((resolve, reject) => {
    Vue.http.get('url2').then((response) => {
      resolve(response.json())
    }, (response) => {
      reject(response.status)
    })
  })
  Promise.all([promise1, promise2]).then(([v1,v2]) => {
    // Process of merging results v1 and v2 together here
  })

Most helpful comment

@mikeyao

var promise1 = Vue.http.get('url1'); // note there is no then or catch callbacks
var promise2 = Vue.http.get('url2');

Promise.all([promise1, promise2]).then(([v1,v2]) => {
    // Process of merging results v1 and v2 together here
  })

All 6 comments

You may not need to use a Promise to wrap it,

Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

// in a Vue instance
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

@reverland Thanks for your reply. This does not exactly solve my user cases. Could you show an example how to file two api in parallel, then able to capture when both are ready, then do something? Thx

@mikeyao

var promise1 = Vue.http.get('url1'); // note there is no then or catch callbacks
var promise2 = Vue.http.get('url2');

Promise.all([promise1, promise2]).then(([v1,v2]) => {
    // Process of merging results v1 and v2 together here
  })

@hfalucas Thanks very much!

Hey guys, does _Promise.all_ require including some polyfill or Vue-resource has taken care about this?

For anyone looking for an answer to the above question: yes, vue-resource takes care of Promise.all (and other Promise methods as well).

Was this page helpful?
0 / 5 - 0 ratings