Vue Axios – Get Request

axios.get('/user', {  params: {  ID: 12345  }  })
  .then((response) => {  
this.response = response.data.records;  
}).catch(function (error)
 { 
this.errors = error.response.data.errors;
});

The code above is making a GET request to the ‘/user‘ route. In the params object, it is passing in the ID parameter with a value of 12345. If the request is successful, the .then() function will run and the response data will be stored in the ‘response‘ variable. If there is an error, the .catch() function will run and the error data will be stored in the ‘errors‘ variable.

Vue Axios – POST Method

//With Images

let formData = new FormData();
formData.append('image', this.image);
axios.post('/post/to-this-url', formData)
.then(response => {
this.response = response.data.records;
})
.catch(error => {
this.errors = error.response.data.errors;
});

This code creates a new FormData object and appends an image to it. Then, it posts the FormData object to a specified URL using axios. Finally, it sets the response to the data records returned or sets the errors to the errors returned.

Without Images:

let formData = {
id: id,
title: 'Enquiry',
message: 'Enquiry about something'
};
axios.post('/post/to-this-url', formData)
.then(() => {
window.open('/user/chat/', '_blank');
})
.catch(error => {
this.errors = error.response.data.errors;
});

The code creates an object called formData. This object has three properties: id, title, and message. Then, the code uses the axios library to make a POST request to the ‘/post/to–this–url‘ URL. The formData object is passed as the data payload for the request. Finally, the code defines a callback function for the request. This callback function will open a new window.

Vue Axios – Patch Method

let formData = new FormData();
formData.append('surname', this.surname);
axios.post('/myprofile/' + id + '?_method=PATCH', formData)
.then(response => {
this.response = response.data.records;
})
.catch(error => {
this.errors = error.response.data.errors;
});

The code above creates a new FormData object and appends a key/value pair to it. The key is ‘surname‘ and the value is the value of the ‘surname‘ property of the ‘this‘ object. Next, an HTTP POST request is made to the ‘/myprofile/‘ + id + ‘?_method=PATCH‘ URL, with the FormData object as the request body. If the request is successful, the ‘response‘ property of the ‘this‘ object is set to the data property of the response object. Otherwise, the ‘errors‘ property of the ‘this‘ object is set to the errors property of the response object.

Vue Axios -Delete Method

axios.delete('/admin/image-gallery/'+id)
})
.then((response) => {
this.items.data.splice(index, 1);
}).catch((error) => {
this.error = error.response.data.error;
});

The code is using the axios library to make a delete request to the ‘/admin/image–gallery/‘+id endpoint. If the request is successful, the item is removed from the items array. If the request fails, the error is set to the error response from the server.