Extract axios handler to declaration file, make it abstract.

Author: anotherKyleFrom1994

src/pages/generic/cta/Cta.ts

@@ -1,5 +1,4 @@
 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 {

src/pages/generic/cta/Cta.vue

@@ -1,12 +1,14 @@
 <template>
-  <v-btn fab
-         fixed
-         bottom
-         right
-         color="secondary"
-         @click="hello()"
-         target="_blank"
-         rel="noopener">
+  <v-btn
+    fab
+    fixed
+    bottom
+    right
+    color="secondary"
+    @click="hello()"
+    target="_blank"
+    rel="noopener"
+  >
     <v-icon>mdi-download</v-icon>
   </v-btn>
 </template>

src/pages/generic/nav_bar/NavBar.vue

@@ -1,15 +1,36 @@
 <template>
-  <v-app-bar app color="primary" dark>
+  <v-app-bar
+    app
+    color="primary"
+    dark
+  >
     <div class="d-flex align-center">
-      <v-img alt="Vuetify Logo" class="shrink mr-2" contain src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png" transition="scale-transition" width="40" />
+      <v-img
+        alt="Vuetify Logo"
+        class="shrink mr-2"
+        contain
+        src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
+        transition="scale-transition"
+        width="40"
+      />
 
-      <v-img alt="Vuetify Name" class="shrink mt-1 hidden-sm-and-down" contain min-width="100" src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png" width="100" />
+      <v-img
+        alt="Vuetify Name"
+        class="shrink mt-1 hidden-sm-and-down"
+        contain
+        min-width="100"
+        src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
+        width="100"
+      />
     </div>
 
     <v-spacer></v-spacer>
 
     <router-link to="/login">
-      <samll-btn displayWording="LOGIN NOW!" :iconType="iconType.Person" />
+      <samll-btn
+        displayWording="LOGIN NOW!"
+        :iconType="iconType.Person"
+      />
     </router-link>
   </v-app-bar>
 </template>

src/pages/generic/toolbar/Toolbar.vue

@@ -1,32 +1,42 @@
 <template>
-  <v-app-bar app
-             flat>
-    <v-app-bar-nav-icon class="hidden-md-and-up"
-                        @click="toggleDrawer" />
+  <v-app-bar
+    app
+    flat
+  >
+    <v-app-bar-nav-icon
+      class="hidden-md-and-up"
+      @click="toggleDrawer"
+    />
     <v-container class="mx-auto py-0">
       <v-row>
-        <v-img :src="require('@/assets/logo.png')"
-               contain
-               class="mr-5"
-               height="48"
-               width="48"
-               max-width="48"
-               @click="$vuetify.goTo(0)" />
-        <v-btn v-for="(link, i) in links"
-               :key="i"
-               :to="link.to"
-               class="ml-2 hidden-sm-and-down"
-               tile
-               text
-               @click="onClickButton($event, link)">
+        <v-img
+          :src="require('@/assets/logo.png')"
+          contain
+          class="mr-5"
+          height="48"
+          width="48"
+          max-width="48"
+          @click="$vuetify.goTo(0)"
+        />
+        <v-btn
+          v-for="(link, i) in links"
+          :key="i"
+          :to="link.to"
+          class="ml-2 hidden-sm-and-down"
+          tile
+          text
+          @click="onClickButton($event, link)"
+        >
           {{ link.text }}
         </v-btn>
         <v-spacer />
-        <v-text-field append-icon="mdi-magnify"
-                      flat
-                      hide-details
-                      solo-inverted
-                      style="max-width: 300px;" />
+        <v-text-field
+          append-icon="mdi-magnify"
+          flat
+          hide-details
+          solo-inverted
+          style="max-width: 300px;"
+        />
       </v-row>
     </v-container>
   </v-app-bar>

src/plugins/axios-handler/axiosrc.ts renamed to src/plugins/axios-handler/config/axiosrc.ts

@@ -0,0 +1,11 @@
+export interface Params<T> {
+    [key: string]: T;
+}
+
+export interface AxiosHandlerStatic<T> {
+    requestGet ( url: string, params?: Params<T> ): Function;
+    requestPost ( url: string, params?: Params<T> ): Function;
+}
+
+declare const AxiosHandler: AxiosHandlerStatic;
+export default AxiosHandler;

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

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

src/plugins/axios-handler/index.ts

@@ -1,6 +1,5 @@
 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,10 +1,10 @@
 import { Store } from 'vuex';
 import { State } from '@/plugins/store';
-import { requestGet } from '@/plugins/axios-handler';
+import AxiosHandler from '@/plugins/axios-handler';
 
 const actions = {
   fetchImages: function () {
-    return requestGet('fetchImages', {
+    return AxiosHandler.requestGet('fetchImages', {
       size: '1024*720'
     });
   }