Unable to dispatch from axios.js

bambinou

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

metalsadman

should post a pen, the code doesn’t make sense in how you show it sry.

bambinou

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.

metalsadman

what does the error message says>?

bambinou

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.

metalsadman

Is your store initiated already when you are calling it? Your probably using this file before it got initiated.