Navigation

    Quasar Framework

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Unable to dispatch from axios.js

    Framework
    2
    6
    318
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • B
      bambinou last edited by

      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

      1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman last edited by

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

        1 Reply Last reply Reply Quote 0
        • B
          bambinou last edited by 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.

          1 Reply Last reply Reply Quote 0
          • metalsadman
            metalsadman last edited by

            what does the error message says>?

            1 Reply Last reply Reply Quote 0
            • B
              bambinou last edited by

              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.

              1 Reply Last reply Reply Quote 0
              • metalsadman
                metalsadman last edited by

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

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post