Does anyone know if it is possible to wait for a process (axios call) to return a response before showing the prompt?
I'm trying to use the Terminal Component like a normal terminal where commands can be issued which might take a while to complete. And the problem I am facing is that the prompt returns instantly even though no response has been returned yet. As you might expect, this is confusing our users...
Here is a stripped out version of my code (which has the problem)
Code: Select all
<template>
...
<Terminal welcomeMessage="Welcome" prompt="$ " />
....
</template>
<script>
import Terminal from 'primevue/terminal';
import TerminalService from 'primevue/terminalservice'
...
setup(props) {
onMounted(() => {
TerminalService.on('command', commandHandler);
})
onBeforeUnmount(() => {
TerminalService.off('command', commandHandler);
})
const commandHandler = (text) => {
...
switch (command) {
case "fast command":
TerminalService.emit('response', "Instantly respond with result");
break;
case "slow command":
// call an axios function which could take a while to respond
callAsyncFunc(text);
break;
....
}
const callAsyncFunc = async (message) => {
await axios.put(route("async.submit"), {
message: message,
}).then((response) => {
try {
response.data.choices.forEach(choice => {
TerminalService.emit('response', choice.message.content);
})
} catch (err) {
TerminalService.emit('response', "Failed to connect");
console.error(err);
}
}).catch(err => {
TerminalService.emit('response', "Failed to connect");
console.error(err.response);
});
}
},
But the second command instantly returns a promise and therefore allows the terminal to show the command prompt again.
Is it possible to 'delay' Terminal until I get a response from the axios call?
I've searched all over the place for an answer and can't find one anywhere (maybe I'm missing the obvious) so if anyone has any ideas, I'd appreciate any pointers.
Thank you!