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/bf118322301af3fc334437c683887c5fThank 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.