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.

No More Posting New Topics!

Unable to dispatch from axios.js