The error says:

TypeError: Oe.dispatch is not a function
    at app.js:1
app.js:1 Uncaught (in promise) TypeError: Cannot read property 'status' of undefined
    at app.js:1

It looks like you cannot add a dispatch to the promise reject. No idea why.

I did not want to post the full code as I thought it was more a problem with the dispatch not being read than the code itself as the console.log() is executed in this function where the dispatch is located. Here is the whole code:

import axios from 'axios';
import store from '../store';
import state from '../store/common/state';
import { Loading } from 'quasar';

export const api = axios.create({
  baseURL: process.env.API_URL,
  timeout: 20000,
  headers: {
    'Accept': 'application/json',
    'Authorization': 'Bearer ' + state.accessToken
  }
});

// Interceptor Request
api.interceptors.request.use(function (config) {
  Loading.show();
  return config;
}, function (error) {
  Loading.hide();
  return Promise.reject(error);
});

// for multiple requests
let isRefreshing = false;
let failedQueue = [];

const processQueue = (error, token = null) => {
  failedQueue.forEach(prom => {
    if (error) {
      prom.reject(error);
    } else {
      prom.resolve(token);
    }
  });

  failedQueue = [];
};

api.interceptors.response.use(function (response) {
  Loading.hide();
  return response;
}, function (error) {
  const originalRequest = error.config;
  if (error.response.status === 401 && !originalRequest._retry) {
    if (isRefreshing) {
      return new Promise(function (resolve, reject) {
        failedQueue.push({ resolve, reject });
      }).then(token => {
        originalRequest.headers['Authorization'] = 'Bearer ' + token;

        return api(originalRequest);
      }).catch(err => {
        Loading.hide();
        return err;
      });
    }

    originalRequest._retry = true;
    isRefreshing = true;

    const refreshToken = state.accessToken;
    return new Promise(function (resolve, reject) {
      api.post('/refreshtoken', { refreshToken })
        .then(({ data }) => {
          window.localStorage.setItem('accessToken', data.accessToken);
          window.localStorage.setItem('refreshToken', data.refreshToken);

          api.defaults.headers.common['Authorization'] = 'Bearer ' + data.accessToken;
          originalRequest.headers['Authorization'] = 'Bearer ' + data.accessToken;

          processQueue(null, data.accessToken);
          resolve(api(originalRequest));
        })
        .catch((err) => {
          processQueue(err, null);
          reject(err);
        })
        .then(() => {
          isRefreshing = false;
        });
    });
  }
  return Promise.reject(new Error('fail')).then(function () {

  }, function () {
    store.dispatch('common/resetAll', { root: true });
  });
});

This code is used to fetch a new access token with a refresh token when the access token is expired

I got the original idea from here:
https://gist.github.com/Godofbrowser/bf118322301af3fc334437c683887c5f

Thank you.

Hello,

I would like to dispatch to my module from axios.js but I just cannot work it out.

import axios from 'axios';
import store from '../store';
import state from '../store/common/state';
import { Loading } from 'quasar';


//This is the end of my promise
return Promise.reject(new Error('fail')).then(function () {

}, function () {
  store.dispatch('common/resetAll', { root: true });  <-------
});

Any idea why my store dispatch does not work please?

I tried also:

    this.$store.dispatch('common/resetAll', { root: true }); 
    this.$store.dispatch('store/common/resetAll', { root: true }); 
    this.$store.dispatch('../store/common/resetAll', { root: true });

No luck.

Thanks

Hi All.

I have installed Quasar and Cordova, I am totally unable to upload an image to my webserver.

Here is my code:

sendReport: function () {
      let formData = new FormData();
      formData.append('type', this.type);
      formData.append('siteimage', this.picturePath);

      api.post('/addreport', formData, { headers: { 'content-type': 'multipart/form-data' } })
        .then((response) => {


          this.$store.dispatch('alerts/alertGreen', 'Your report has been sent', {
            root: true
          });
        })
        .catch(error => {
          if (error.response.status < 500) {
            this.$store.dispatch('alerts/alertRed', 'There is a problem, please tryin again', {
              root: true
            });
          } else {
            this.$store.dispatch('alerts/alertRed', 'There is something wrong with our server, please try again later', {
              root: true
            });
          }
        });

In the chrome console, I get everything sent properly as:

type: land
siteimage: file:///storage/emulated/0/Android/data/com.ken.mobile/cache/1560461815392.jpg

On the web server side(Laravel), I get:

{"siteimage":["The siteimage must be an image.","The siteimage must be a file of type: jpeg, png, jpg."]}

It is like my server script does not recognise this image. Is this something to do with Cordova itself?

I saw a lot of people using a file transfer plugin(which is now deprecated), is there a way to do the exact same thing with Axios or is it not possible?

Thank you

My apology I mixed up the commands.
It was
cordova run android

It is now working.

Hello,

No idea if anyone has this problem but I am unable to test the Google map API with the Quasar hotreload on Android. I keep getting this error:
geolocation.js:35 [Deprecation] getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.

Any idea how to get around this please?

Thank you.

Hello,

When I used to work with Cordova I could use this command to generate the app and have it installed on my mobile automatically:

cordova build android --debug --device

Today I tried:

quasar build -m cordova -T android
quasar build -m cordova -T android --debug --device

None of them send the APK to the device, instead it generates the apk and you have to manually send it.

Any idea please?

Thank you.

Thank you so much, I would not have worked it out without you.

Thanks, yes I tried, perfect!!! thanks again.

Hello,

Quick question please.

I am trying to have this transition:
<q-select
label=“Flip up/down”
transition-show=“flip-up”
transition-hide=“flip-down”
filled
v-model=“model”
:options=“options”
style=“width: 250px”
/>

But it is not working on my page, do I need to import something in my quasar config file please? I cannot find anything in the doc regarding import for this effect here:
https://quasar.dev/options/transitions

This is really the best framework I have ever used for mobile, absolutely superb!

Thank you.