9.7.3 Requests - caligrafy/caligrafy-quill GitHub Wiki
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, 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.
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));
}
//...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 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)
//...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)
//...