In VueJS, I have handler of an input field changes, as below:
inputHandler(url, params){
const p = new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
...
...
});
p.then(res => this.reactiveProperty = res);
}
So, I gain response and put it into a reactive variable. I send requests at order 1, 2, 3, 4, but receive responses in order 4, 1, 3, 2 (for example).
This is a reason, that the variable gets incorrect value. How could avoid it?
You can use async, await. It will wait the first promise then gets to the second, second then third...etc. Also like @T.J. Crowder said, you should use the fetch api instead.