Assuming asynchronous1 and asynchronous2 don’t return Promises – which is likely the case since they take a callback function
You could do this (messy)
export default {
data: () =>({
data1: [],
data2: [],
lastData: []
}),
mounted() {
let lastFunction = (() => {
let count = 0;
return () => {
count++;
if (count === 2) {
this.lastData = this.data1.concat(this.data2);
}
};
})();
asynchronous1(val, (data) => {
this.data1 = data;
lastFunction();
})
asynchronous2(val, (data) => {
this.data2 = data;
lastFunction();
})
},
}
But it’ll work
The nicer solution would be to use async/await and Promises
export default {
data: () =>({
data1: [],
data2: [],
lastData: []
}),
async mounted() {
const p1 = new Promise(resolve => {
asynchronous1(val, (data) => {
this.data1 = data;
resolve();
})
});
const p2 = new Promise(resolve => {
asynchronous2(val, (data) => {
this.data2 = data;
resolve();
})
});
await Promise.all([p1, p2]);
this.lastData = this.data1.concat(this.data2);
},
}
I’d probably go as far as this though:
export default {
data: () =>({
data1: [],
data2: [],
lastData: []
}),
async mounted() {
const promisify = fn => (...args) => new Promise(resolve => fn(...args, resolve));
const p1 = promisify(asynchronous1);
const p2 = promisify(asynchronous2);
const [r1, r2] = await Promise.all([p1(val), p2(val)]);
this.data1 = r1;
this.data2 = r2;
this.lastData = [...r1, ...r2];
},
}
The difference here is that this.data1/this.data2 won’t get populated until both asynchronous functions complete – which may not be to your liking
You could do
const [r1, r2] = await Promise.all([
p1(val).then(r => this.data1 = r),
p2(val).then(r => this.data2 = r)
]);
instead of
const [r1, r2] = await Promise.all([p1(val), p2(val)]);
this.data1 = r1;
this.data2 = r2;
Which would get it to populate in the same way as your original code seems to want to do – I just hate using async/await AND .then … but there are edge cases where it’s a better option than pure async/await – in my opinion
Of course, if asynchronous1/2 can return a promise if you don’t specify a callback function (getting more common these days) then the code may be even simpler
i.e
const [r1, r2] = await Promise.all([asynchronous1(val), asynchronous2(val)]);
instead of
const p1 = promisify(asynchronous1);
const p2 = promisify(asynchronous2);
const [r1, r2] = await Promise.all([p1(val), p2(val)]);
CLICK HERE to find out more related problems solutions.