Uploaded basic usage of axios interceptor, needed for extracting it to a declaration file.

Author: anotherKyleFrom1994

src/pages/generic/cta/Cta.ts

@@ -1,9 +1,11 @@
 import { Component, Vue, Prop, Watch, Emit } from 'vue-property-decorator';
 import { requestGet } from '@/plugins/axios-handler';
+import { namespace } from 'vuex-class';
 @Component({})
 export default class Cta extends Vue {
+  @namespace('home').Action('fetchImages') fetchImages!: Function;
 
   private hello() {
-    requestGet('aaaa', { x: 'a', y: 'b' });
+    this.fetchImages();
   }
 }

src/plugins/axios-handler/index.d.ts

@@ -1,24 +1,64 @@
 // 默认利用axios的cancelToken进行防重复提交。
 // 如需允许多个提交同时发出。则需要在请求配置config中增加 neverCancel 属性，并设置为true
-import axios from 'axios';
+import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
 import baseConfig from './axiosrc';
-import { Vue } from 'vue-property-decorator';
+
 // define AJAX params that should be a key value pair
-interface params {
+interface Params {
   [key: string]: any
 }
 
-function createInstance (params ? : params, timeout ? : number) {
+function createInstance (params ? : Params, timeout ? : number) {
   if (params !== undefined) baseConfig.params = params;
   if (timeout !== undefined) baseConfig.timeout = timeout;
 
-  return axios.create(baseConfig);
+  const instance = axios.create(baseConfig);
+  requstInterceptor(instance);
+  responseInterceptor(instance);
+
+  return instance;
 }
 
-export function requestGet (url: string, params ? : params) {
-  return createInstance(params).get(url);
+function requstInterceptor (instance: AxiosInstance) {
+  instance.interceptors.request.use((config: AxiosRequestConfig) => {
+    console.log(config);
+    return config;
+  });
 }
 
-export function requestPost (url: string, params ? : params) {
-  return createInstance(params).post(url);
+function responseInterceptor (instance: AxiosInstance) {
+  instance.interceptors.response.use((response: AxiosResponse) => {
+    console.log(response);
+    return response;
+  });
+}
+
+export function requestGet (url: string, params ? : Params) {
+  return createInstance(params)
+    .get(url)
+    .catch((error: Error) => {
+      errorHandler(error);
+    })
+    .finally(() => {
+      doFinally();
+    });
+}
+
+export function requestPost (url: string, params ? : Params) {
+  return createInstance(params)
+    .post(url)
+    .catch((error: Error) => {
+      errorHandler(error);
+    })
+    .finally(() => {
+      doFinally();
+    });
+}
+
+function errorHandler (error: Error) {
+  console.log(error);
+};
+
+function doFinally () {
+  console.log('finally');
 }

src/plugins/axios-handler/index.ts

@@ -18,7 +18,9 @@ let opt: StoreOptions < any > = {
   modules: { app, home, activity },
 
   // root states
-  state: {},
+  state: {
+    user: 'user'
+  },
   mutations: {},
   actions: {},
   getters: {}

src/plugins/store/index.ts

@@ -1,6 +1,6 @@
 import { Store } from 'vuex';
 import { State } from '@/plugins/store';
-
+import { requestGet } from '@/plugins/axios-handler';
 const actions = {
 
 };

src/plugins/store/modules/app/modules/actions.ts

@@ -1,8 +1,13 @@
 import { Store } from 'vuex';
 import { State } from '@/plugins/store';
+import { requestGet } from '@/plugins/axios-handler';
 
 const actions = {
-
+  fetchImages: function () {
+    return requestGet('fetchImages', {
+      size: '1024*720'
+    });
+  }
 };
 
 export default actions;