Unable to dispatch from axios.js



  • 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



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



  • 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.



  • what does the error message says>?



  • 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.



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


Log in to reply