feat: umi-request

create/index.js

@@ -38,11 +38,7 @@ const templates = {
     composables: './create/templates/module/composables/index.ts',
     constants: './create/templates/module/constants/index.ts',
     locales: './create/templates/module/locales/example.en.yaml',
-
-    services: [
-      './create/templates/module/services/exampleService.ts',
-      './create/templates/module/services/index.ts'
-    ],
+    services: './create/templates/module/services/index.ts',
 
     stores: [
       './create/templates/module/stores/exampleActions.ts',
@@ -206,27 +202,16 @@ const createModule = {
 
   services: () => {
     const folder = `${createFolder('module', 'services')}/`
-    const file = [
-      `${camelCase(name)}Service.ts`,
-      'index.ts'
-    ]
-
-    const path = file.reduce((carry, item) => {
-      return [...carry, folder + item]
-    }, [])
+    const file = 'index.ts'
+    const path = folder + file
 
     if (!checkPath(path)) {
       shell.touch(path)
+      shell.exec(`cat ${templates.modules.services} > ${path}`)
 
-      for (const index in templates.modules.services) {
-        shell.exec(`cat ${templates.modules.services[index]} > ${path[index]}`)
-
-        log(folder, file[index], true)
-      }
+      log(folder, file, true)
     } else {
-      for (const index in templates.modules.services) {
-        log(folder, file[index], false)
-      }
+      log(folder, file, false)
     }
   },
 

create/templates/module/services/index.ts

@@ -1,4 +1,6 @@
-import ExampleService from './exampleService'
-import { httpService } from '@/services'
+import createService from '@/services/createService'
 
-export const exampleService = new ExampleService(httpService)
+export const exampleService = createService(
+  String(import.meta.env.VITE_API_URL),
+  Number(import.meta.env.VITE_TIMEOUT),
+)

create/templates/module/stores/exampleMutations.ts

@@ -1,4 +1,3 @@
-import type { AxiosError } from 'axios'
 import type {
   ExampleDataModel,
   ExampleState,
@@ -25,9 +24,9 @@ const mutations: Record<string, Function> = {
 
   /**
    * @param  {ExampleState} state
-   * @param  {AxiosError} response
+   * @param  {Error} response
    */
-  [types.EXAMPLE_ERROR]: (state: ExampleState, response: AxiosError) => {
+  [types.EXAMPLE_ERROR]: (state: ExampleState, response: Error) => {
     state.isFetching = false
     state.isError = response
   },

create/templates/module/typings/exampleTypings.ts

@@ -1,9 +1,7 @@
-import type { AxiosError } from 'axios'
-
 export interface ExampleState {
   data: ExampleDataModel[]
   isFetching: boolean
-  isError: AxiosError
+  isError: Error
 }
 
 export interface ExampleDataModel {

create/templates/module/views/exampleIndex.vue

@@ -1,7 +1,4 @@
 <script lang="ts" setup>
-import { onMounted } from 'vue'
-import { useStore } from 'vuex'
-
 import { EXAMPLE_REQUEST } from '@/stores/Example/exampleTypes'
 
 const store = useStore()

readme.md

@@ -23,7 +23,7 @@ Learn the design pattern [here](https://github.com/logustra/dave)
 - Localization: [vue-i18n](https://github.com/intlify/vue-i18n-next), [vite-plugins-i18n](https://github.com/intlify/vite-plugin-vue-i18n)
 - UI Documentation: [vitebook](https://github.com/vitebook/vitebook)
 - Testing: [vitest](https://vitest.dev/)
-- HTTP request: [axios](https://github.com/axios/axios)
+- HTTP request: [umi-request](https://github.com/umijs/umi-request)
 - Git custom hooks: [husky](https://github.com/typicode/husky)
 - Commit conventions: [commitizen](https://github.com/commitizen/cz-cli)
 - Linters: [commitlint](https://github.com/conventional-changelog/commitlint), [eslint](https://github.com/eslint/eslint), [@antfu/eslint-config](https://github.com/antfu/eslint-config)

src/services/createService.ts

@@ -0,0 +1,44 @@
+import { extend } from 'umi-request'
+
+function createService(
+  baseUrl: string,
+  timeout: number,
+) {
+  const STATUS_CODES = {
+    401: 'Unauthorized',
+    404: 'Page not found',
+  }
+
+  const request = extend({
+    prefix: baseUrl,
+    timeout,
+    errorHandler(error) {
+      if (error.response) {
+        /**
+         * DESC:
+         * the request was made and the server responded with a status code
+         * that falls out of the range of 2xx
+         */
+        console.error(STATUS_CODES[error.response.status])
+      }
+      else {
+        /**
+         * DESC:
+         * the request was made but no response was received
+         * or error occurs when setting up the request.
+         */
+        console.error(error.message)
+      }
+
+      return error
+    },
+  })
+
+  request.interceptors.response.use((response) => {
+    return response
+  })
+
+  return request
+}
+
+export default createService

src/services/index.ts

@@ -1,6 +1,6 @@
-import Http from './Http'
+import createService from './createService'
 
-export const httpService = new Http({
-  baseURL: import.meta.env.VITE_API_URL,
-  timeout: Number(import.meta.env.VITE_TIMEOUT),
-})
+export const httpService = createService(
+  String(import.meta.env.VITE_API_URL),
+  Number(import.meta.env.VITE_TIMEOUT),
+)