Proxy Service

You could, of course, enable REST API calls directly from your javascript code inside your Component. However, it's more than likely that you would run into CORS issues, sooner or later.

In this case, you can use our Proxy endpoint. It works just like a Vue Resource inside your Component, except we intercept the request and forward it to the proxy to make the request from the server, and then we forward the response back to you to handle in your component code.

Example - GET, DELETE

this.$http.get('https://someurl.com')

You may also want to pass some params data in the request body or as query params. You can do this as a second argument, as an Object.

let options = {
  params: {
    "name": "Vulcan"
  }
}

this.$http.get('https://someurl.com', options)

You may also need to pass some custom headers, which you can do inside the options object.

let options = {
  params: {
    "name": "Vulcan"
  },
  headers: {
    "Authorization": "MyApiKey"
  }
}

this.$http.get('https://someurl.com', options)

Example - POST, PUT, PATCH

These request types work in the same way as the previous GET examples, with a slight difference in passing arguments for headers and request body.

this.$http.post('https://someurl.com', body, options)

Where body is a plain object containing your JSON data.

let body = {
  "name": "Vulcan",
  "url": "https://vulcanapp.com"
}

and options is an Object that contains, for example, your headers - which you can pass as the third argument in the request.

let options = {
  headers: {
    "Authorization": "MyApiKey",
    "Content-Type": "application/json"
  }
} 

Promise

The request is made asynchronously and returns a javascript Promise. You handle the response using then()

.then(function(result){
  console.log(result);
});

You can also handle the case that the Promise returns an error

.then(function(result){
  console.log(result);
}, function(error){
  console.log(error.description);
});

this method can be chained to the request:

this.$http.post('https://someurl.com', body, options)
.then(function(result){
    console.log(result);
}, function(error){
    console.log(error.description);
});

With this feature you can build all kinds of integrations with third-party APIs.

Questions or comments about this page?

Add a Topic