Quasar: Strange issue with Toast (not allways showing)

Created on 22 Sep 2017  路  12Comments  路  Source: quasarframework/quasar

I have some strange behavior of Quasar Toast :( (latest quasar version)

In my main.js i have mixed in $fetch function, that is my wrapper for regular fetch().
In case of fetch errors, it should show an UI error to user.

But the toast is showing from time to time, not always =

the situation is similar to that, as if Toast component is loading (or not loading) once:
When i refreshing whole app with f5, if i'm lucky, Toast will work always. But on next reload, if i'm not lucky this time, this Toast will not work at all.

And one more note: the chance of Toast to get work is much greater if developer console is opened in my Firefox, when i'm reloading page. as if Toast need some little lag when Dom loading, and then it loads successful.

Sorry for my bad english :)

My code:

```javascript
// Global functions
Vue.mixin({
methods: {
$fetch: function( url, method, data, callback, failCallback ) {
this.$Progress.start()
var body = null;
if( method == "POST" || method == 'PUT' ) {
body = JSON.stringify(data);
}
fetch( url, {
method: method,
body: body,
credentials: "same-origin",
headers: {
"Accept": "application/json"
}
})
.then((resp) => {
if( resp.status != 200 ) {
// bus.$emit('snackbar-error', "袨褕懈斜泻邪 锌褉懈 蟹邪锌褉芯褋械 褋械褉胁械褉邪 (泻芯写 " + resp.status + "): " + resp.statusText);

                    Toast.create.negative({
                        html: "袨褕懈斜泻邪 锌褉懈 蟹邪锌褉芯褋械 褋械褉胁械褉邪 (泻芯写 " + resp.status + "): " + resp.statusText,
                        icon: 'warning',
                        timeout: 3000,
                        onDismiss: () => {
                            this.error = false;
                            console.log('toast dismissed');
                        }
                    });
                    console.log('code!=200');
                    this.$Progress.fail();
                    if( failCallback != undefined ) {
                        failCallback();
                    }
                    return false;
                }

                this.$Progress.finish()
                return resp.json();
            });

`

Most helpful comment

Rizwan, hope you are good. No worries at all. I really wanted to Thank you for this great framework and efforts you make :) appreciate it.

All 12 comments

Hello. I encountered a similar problem when using direct QLoading on Axios, on every request. The problem is that the requests are asynchronous.
Then in the reload of the page, if 5 calls were executed and the first had returned in 1seg the loading closed, but the other 4 were running. I believe you are experiencing the same problem.

in my case Loading sometimes worked 100% and sometimes not, as in your ..
From the .14 version of the quasar, I'm using QInnerLoading, controlling the open / close on each request and also because it brings a better user experience.
Hope it help.

I use them for different cases.
But, with QInnerLoading i have another issue :) https://github.com/quasarframework/quasar/issues/944

Maybe your Toast not working right beacause of assyncornous too.

Maybe u missing .catch ( from https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API/Using_Fetch)

fetch('flowers.jpg').then(function(response) {
  if(response.ok) {
    response.blob().then(function(myBlob) {
      var objectURL = URL.createObjectURL(myBlob);
      myImage.src = objectURL;
    });
  } else {
    console.log('Network response was not ok.');
  }
})
.catch(function(error) {
  console.log('There has been a problem with your fetch operation: ' + error.message);
});

I've pasted here shorter variant :) Actually, i am using catch(), but no errors reported.
Log is dumping to console just before and just after Toast call, but Toast itself is not showing

@ircop - had the same issue. Are you using the 'load()' function in your router.js to load the component? Try to import and see if that works better?

We are having the same issue with the toasts. Its Randomly showing up ... Any work around ? :) really appreciate.

@gcshri , @visadb-io , Sorry, i've switched to element :(

v0.15 will ensure there won't be any such cases. Sorry for the delay. Maybe the documentation should be more clear for v0.14 but currently don't have time now as I'm pushing very hard for v0.15 release.

Rizwan, hope you are good. No worries at all. I really wanted to Thank you for this great framework and efforts you make :) appreciate it.

Hi, Toast has been replaced by the bulletproof Notify in v0.15, so closing this.

Was this page helpful?
0 / 5 - 0 ratings