Is there a way to extract only the value from the most recent request?

While working with VueJS, I have a handler for changes in an input field that looks like this:

inputHandler(url, params){                    
  const p = new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('POST', url, true);
    ...
    ...
  });
  p.then(res => this.reactiveProperty = res);
}

After sending requests in the order of 1, 2, 3, and 4, I receive responses in the order of 4, 1, 3, 2 (for example).

This results in my variable getting an incorrect value. How can I prevent this from happening?

Answer №1

Implementing async/await in your code will allow for sequential execution of promises, ensuring that each promise is resolved before moving on to the next one. As suggested by @T.J. Crowder, utilizing the fetch api would also be beneficial.

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

Encountered an error in the React.js app where it cannot read the property 'Tag' of undefined from domhandler

I recently encountered an issue with my react.js project, which utilizes domhandler v4.2.0 through cheerio. Everything was running smoothly for months until one day, I started getting this error during the build process: domelementtype package includes a ...

Issue with running the Jquery each function within a textbox inside an ASP.NET gridview

Below is the gridview markup: <asp:GridView ID="gvDoctorVisits" runat="server" DataKeyNames="AdmissionId" class="tableStyle" AutoGenerateColumns="False" Width="100%" EmptyDataText=& ...

Tips for customizing the blinking cursor in a textarea

I am experimenting with creating a unique effect on my website. I have incorporated a textarea with transparent text overlaying a pre element that displays the typed text dynamically using JavaScript. This creates an illusion of the user typing in real-tim ...

Discovering the presence of a NAN value within a JSON string

Consider the following scenario: I have a function that receives jsonData in JSON format, and I want to validate the variable jsonData to check for NaN. How can I achieve this? function save() { var jsonData = getEnteredValue(); $.ajax({ ...

The best way to focus on ESNext modules in Nuxt

I need to configure ESNext modules in my Nuxt application, but I haven't been able to find any information on how to do it. Can anyone provide guidance on this? https://i.stack.imgur.com/qvKZd.png For more context, please check out: https://github.c ...

Sorting and selecting isotopes, with the option to filter or unfilter

All day I've been struggling to find a solution for my isotope filtering issue. I'm using classes from the database to tag items, such as categories and dates, and allowing users to filter them. The tricky part is making these filters work like o ...

Adding jQuery namespace to AngularJS

I'm facing a bit of an issue here. I've implemented RequireJS to manage my modules and dependencies. To prevent cluttering the global namespace, I've set up the following configuration to avoid declaring $ or jQuery globally: require.confi ...

Guide to successfully downloading an xlsx file in angular through express

I am creating an xlsx file based on user input within the express framework. The data is sent via a post request and I intend to send back the file content using res.download(...). However, when I do this, the data field in my ajax response ends up contai ...

What is the correct way to use variables to reference whether an item is odd or even in an ng-repeat loop?

Is there a way to access the variables $odd and $even within ng-repeat using a variable for reference? Here is what I have attempted: <ng-repeat="item in items" ng-if="$odd">these are odd{{item}}</div> <ng-repeat="item in items" ng-if="$eve ...

Repairing the 'Uncaught TypeError: Cannot read property 'split' of undefined' bug in a Prestashop Module

Help! I'm encountering an issue with a Prestashop module, and the developer is unresponsive. Can anyone shed light on why I am seeing this error in the console? Thank you so much in advance! admin.js:57 Uncaught TypeError: Cannot read property ' ...

Show SVG in its ViewBox dimensions

Currently, I am utilizing the img-Tag to showcase SVG images that have been uploaded by users onto my Amazon S3 storage. <img src="http://testbucket.s3.amazonaws.com/mysvg.svg" /> An issue arises once the image is displayed as it does not retain i ...

Unveiling the Magic: Displaying Quill's raw HTML in Vue.js

Within my Vue.js app, I am utilizing the Quill editor to generate raw HTML content that is saved directly to the database without any cleaning. When fetching this content from the backend, the text and styling are displayed correctly (colors, bolding, etc. ...

Error: No package.json file found after publishing npm package with ENOLOCAL

Ecosystem using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="335d435e73051d021d03">[email protected]</a> using <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c6a8a9a2a386b0fee8f7f7e ...

Experiencing issues with the session not functioning properly on the login page

After setting up Centos 6.4 on my HP Server with PHP 5.3.3, Apache 2.2.15, and Mysql 5.1.69, I encountered login issues where it always fails. Here is the source code: index.php <? include "functions.php"; start_session(); session_destroy(); start_ ...

Finding the scope of dynamically generated fields in AngularJS has proven to be quite challenging

I'm currently working on creating a dynamic form where users can add input fields by clicking a button. However, I am facing issues with fetching the value of the input field in the controller. Below is my form: <div ng-repeat="skill in skill_set" ...

Seamlessly connect Gridsome with HubSpot for advanced page tracking

As a novice developer who has recently taken on clients, I encountered a request to integrate a website with the HubSpot page tracker. After checking the developer page, I realized that there are no specific instructions for Gridsome, which is what my app ...

Guide to Generating Downloadable Links for JPG Images Stored in MongoDB Using Node.js

I have successfully uploaded an image to MongoDB as a Buffer. Now, I need to figure out how to display this image in my React Native app using a URL, for example: http://localhost:8080/fullImg.jpeg How can I achieve this? Below is the MongoDB Schema I am ...

AngularJS SmartyUI position not dynamically updating on SmartyStreets plugin

In my angularJS application, I am utilizing SmartyStreets' LiveAddress for address validation and autofilling two fields in a form. After the user submits the form, a message (either success or failure) is displayed in a div above the form. However, t ...

Sending Data via Ajax

I am currently working on implementing an ajax invitation script that allows users to invite their friends to an event. The javascript code I have used in other parts of the website works perfectly, but for some reason, it is not functioning correctly in t ...

The Jquery animate function is not compatible with the transform property

I am facing an issue with the Jquery animate function. Despite trying various solutions, I have been unable to get it to work. Below is the HTML code that I have used: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...