Axios mistakenly sending DELETE requests before GET requests

I'm currently developing a Vue.js project that is connected to a Lumen API and everything is functioning smoothly.

Within this project, I have implemented a list of students ('Etudiants') that allows users to select and delete a student by clicking on the list and using a button in the toolbar, respectively.

Upon deleting a student, I need to refresh the student list as it becomes outdated. This requires making two API calls using Axios:

  1. DELETE (param: idEtudiant)
  2. GET (param: page)

The issue arises when the API calls are not executed in the correct order, as depicted in the waterfall diagram below:

https://i.sstatic.net/2RAOa.png

This problem involves three Vue.js files:

'Etudiants.vue' and its two child components: 'ListeEtudiants.vue' (student list) and 'BarreOutilsEtudiant.vue' (toolbar)

https://i.sstatic.net/3mnKB.png

The visual representation above shows the hierarchy of these three files and the ideal execution order.

In my case, the third action, which is the Axios DELETE request, is being executed last instead of in the correct sequence.

Below are the contents of the files involved:

Etudiants.vue:

 [Contents of Etudiants.vue file]

ListeEtudiants.vue:

 [Contents of ListeEtudiants.vue file]

BarreOutilsEtudiant.vue:

 [Contents of BarreOutilsEtudiant.vue file]

Your assistance in resolving this issue is greatly appreciated. Thank you for your help!

javascriptvue.jsvuejs2axios

Answer №1

The issue seems to be located at this point:

.then(this.$refs.list.loadList())

By using this syntax, loadList is executed immediately and its return value is passed to then, which may not be the desired behavior.

Instead, it is recommended to wrap it in a function like this:

.then(() => this.$refs.list.loadList())

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieve a dynamic HTML object ID using jQuery within Angular

In my Angular application, I have implemented three accordions on a single page. Each accordion loads a component view containing a dynamically generated table. As a result, there are three tables displayed on the page - one for each accordion section. Abo ...

javascriptjqueryhtmlangularjs

Guide on uploading multiple files with the integration of CodeIgniter and Vue.js

It seems like when using codeigniter $this->upload->do_upload('file'), all my files are being uploaded at once but they are getting renamed to the same name. For example, if I upload files named 1.png, 2.png, 3.png, 4.png, after the upload, ...

phpvue.jscodeigniter

Vue looping through nested checkbox groups

Here is an object I am working with: rightGroups: [ { name: "Admin Rights", id: 1, rights: [ { caption: 'Manage Rights', name: 'reports', ...

javascriptjsonvue.jsv-for

determining the file size of images being loaded remotely by retrieving their image URLs

There is a straightforward regex function in jQuery that I'm using to automatically add an image tag to image URLs shared by users. This means that when a user posts something like www.example.com/image.jpg, the image tag will be included so that user ...

javascriptjqueryimageimage-processingremote-access

Is it possible for Yarn to fail to include both ESM and CJS versions of a package during publishing or adding?

Our application is equipped with Parcel and utilizes a UI library consisting of react components. This UI library is built with Rollup and is privately published on NPM. I've been attempting to transition our application to Parcel 2, but I'm fac ...

javascriptnpmyarnpkgrollupjsparceljs

Error in Safari Browser: Unexpected token ':' found in AngularJS syntax

When using Chrome, my website works perfectly without any errors. However, when I try to access it on Safari, most of the pages fail to load. The specific error message that appears is: [Error] SyntaxError: Unexpected token ':' (angular.min.js.m ...

javascriptangularjssafari

Dealing with network issues when submitting a form

Is there a smooth way to handle network errors that may arise during the submission of an HTML form? It is important for me not to have the browser cache any information related to the form, but I also want to ensure that the user's data is not lost i ...

javascripthtml

Click on the div to add items from an array into it

I have a unique set of lines stored in an array: var linesArr = ["abc", "def", "ghi"]; In my JavaScript, I dynamically create and style a div element using CSS: var div = document.createElement("div"); div.className = "storyArea"; div.in ...

javascriptjqueryarraysiterationcycle

An array in JSON format containing only one element

I am currently working on a project that involves JSON format output. I am in need of some clarity regarding the structure of JSON arrays. Specifically, I'm curious about how to handle fields that allow multiple entries in an array format. In cases wh ...

javascriptarraysjson

Loop through an array of div IDs and update their CSS styles individually

How can I iterate through an array of Div IDs and change their CSS (background color) one after the other instead of all at once? I have tried looping through the array, but the CSS is applied simultaneously to all the divs. Any tips on how to delay the ...

javascriptjquerycssarrays

Issue encountered while attempting to register child component within vue.js

Encountering the following error: Unknown custom element: - have you registered the component correctly? For recursive components, ensure to include the "name" option. I am unsure of what's causing the issue in the code. I've referred to this ...

vue.js

"Developing a JSON object from a Form: A Step-by-

Currently utilizing the Drag n Drop FormBuilder for form creation. My objective is to generate a JSON representation of the form as shown below: { "action":"hello.html", "method":"get", "enctype":"multipart/form-data", "html":[ { ...

javascriptjqueryjsonforms

A unique string containing the object element "this.variable" found in a separate file

Snippet of HTML code: <input class="jscolor" id="color-picker"> <div id="rect" class="rect"></div> <script src="jscolor.js"></script> <script src="skrypt.js"></script> Javascript snippet: function up ...

javascripthtmlthis

Steps for closing the v-select menu by clicking on prepend-items:

My v-select menu has a unique configuration with 2 v-list-items within a template: <v-select :items=clients dense item-text="full_name" ...

vue.jsvuetify.js

Tips for reducing bundle size in Laravel and Vue while integrating Vuetify

My current setup involves Vue integrated with Laravel. After running npm run production, I noticed that the bundle size is quite large at 1.1MB. This seems to be primarily due to Vuetify, as there are only a few components in use. In previous projects wher ...

laravelvue.jsvuetify.js

Error: Attempting to access a property 'notesObjectInService' that is undefined on the object

I'm currently facing an issue where my controller is unable to load an object from a service called notesFactory. The console.log(typeof notesFactory) statement returns 'undefined', causing notesObjectInService to trigger an exception. Desp ...

javascriptangularjs

How to utilize variables and axios in the mounted lifecycle hook of Vue.JS?

I want to implement an overlay that displays data fetched by axios when the overlay is loaded. I attempted it this way, but encountered an issue where I can't use a variable (.get("/edit/" + id) but it works with a hardcoded value (.get("/edit/" + "12 ...

vue.jsaxios

Creating unsightly class names using Node.js

Is it possible to automatically create random and unattractive class names? For example, is there a tool or plugin that can substitute the .top-header class with something like .a9ev within my CSS code? It would also be ideal if the class name in the HTML ...

javascripthtmlcssnode.jsnpm

Incorporate a NodeJS express object into AngularJS 1.6

I am currently facing a challenge with passing parameters from a NodeJS API to AngularJS so that I can retrieve data for a specific page. My situation is an extension of the issue discussed in this question: How do I pass node.js server variables into my a ...

javascriptangularjsjsonnode.js

Prevent page refresh when submitting a form using PureCSS while still keeping form validation intact

I'm currently implementing PureCSS forms into my web application and facing a challenge with maintaining the stylish form validation while preventing the page from reloading. I discovered that I can prevent the page reload by using onsubmit="return f ...

javascripthtmlajaxformsyui-pure-css