9.7.3 Requests

Integrating frameworks requires a clear definition on the responsibilities of each. One of these responsibilities that could be of concern is Requests. Requests is about handling the request that comes from the browser and dispatching it to the intended modules or pages.

Learn more about Requests here

Requests are handled on the client-side

Requests are handled on the client-side, basically that is exactly what the purpose of a browser is. It is meant to render a user interface for the end-users and turn their commands into requests that the server would understand.

Since Vue is the one responsible for creating the user interface, then Vue needs to handle the requests.

How does Vue handle HTTP Requests

Vue is written in Javascript so there are multiple ways and multiple services to handle HTTP requests in Javascript. Vue recommends using Axios for handling HTTP Requests.

In Caligrafy, there are 4 HTTP requests currently supported 'GET', 'POST', 'PUT' and 'DELETE'. Here is the basic structure of axios requests in the Vue app:

const app = Vue.createApp({
  el: '#app',
  data () {
    return {
        response: null,
        error: null,
        env: env

    }
  },
  /* Method Definition  */
  methods: {
      
      // example of axios get method
      get: function() {
          axios.get('the/route/', <optional parameters>)
              .then(response => (this.response = response))
              .catch(error => (this.error = error));
      },
      
      // example of axios post request
      post: function() {
          axios.post('the/route/', <data in JSON or form data>, <optional parameters>)
              .then(response => (this.response = response))
              .catch(error => (this.error = error));
      },

      // example of axios put request
      put: function() {
          axios.put('the/route/', <data in JSON>, <optional parameters>)
              .then(response => (this.response = response))
              .catch(error => (this.error = error));
      },

      // example of axios delete request
      delete: function() {
          axios.delete('the/route/', <optional parameters>)
              .then(response => (this.response = response))
              .catch(error => (this.error = error));
      }
  
      //...

Javascript methods for data delivery

At this stage, it is good to know that Javascript comes packaged with methods that can help format the data appropriately for the requests.

Sending Data in data form

Sending data in data form is taking the completed HTML form as submitted by the user and handing it off to the server. Javascript provides a mechanism to get the input from the user and turn it into a ready-to-use data form.

    var form = document.getElementById('<id of html form>');
    var formData = new FormData(form);

    // you can append more values to send to the server if needed
    formData.append(<key>, <value>);
          
    // files uploaded need to be appended separately
    let files = document.getElementById('image_url'); 
    formData.append(<image field name>, files.files[0]);
    
    // the formData can now be sent as is to axios
    axios.post('the/route/', formData)
    //...

Sending Data in JSON

In some cases, you might need to send data to the server in a JSON format. A very common example of this is when sending a PUT request through an HTML form. HTML does not support PUT requests. Therefore, the request needs to be spoofed and replaced with a PUT. Through spoofing, form data is no longer comprehensible to the server.

In order to overcome that, you could send the data in a JSON format. Luckily, javascript has a method that would transform form data into JSON:

   // after building the formData similarly to before
   var data = JSON.stringify(Object.fromEntries(formData))

   axios.put('the/route', data)
   //...

Next Section: Forms