Home » vue » Warning about ignored promise in Bootstrap Vue @ok handler

Warning about ignored promise in Bootstrap Vue @ok handler

Posted by: admin November 26, 2021 Leave a comment


My VueJS app uses Bootstrap Vue. The following shows a modal which is basically working fine.

    centered hide-header
    :ok-title="$t('deletion_confirm')" :cancel-title="$t('deletion_abort')"
) {{ $t('deletion_question', {filename: data.item.name}) }}

However, my IDE (WebStorm) shows a warning on the deleteDocument method:

Promise returned from deleteDocument is ignored

deleteDocument() is an async/await method which sends a DELETE request to the backend like this:

async deleteDocument(item) {
  await ApiService.deleteDocument(item);
  // ...

How could I fix that warning?


Every async function return a promise. So in your case @ok="deleteDocument(data.item)" invokes deleteDocument, which returns a promise that no-one handles.
This is just a warning, not an error and can be ignored if you know what you’re doing.

If the warning really bothers you, you can change deleteDocument to a normal function and handle this promise the classic way with a .then() callback method:

deleteDocument(item) {
  ApiService.deleteDocument(item).then(() => {/* handle stuff */});
  // returns undefined by default like every other normal function

This way it doesn’t return a promise that noone handles.