- update dependencies and vscode settings

- add example axios wrapper with test request
- move env path

src/api/base/index.ts

@@ -0,0 +1,78 @@
+import { merge } from 'lodash'
+import type { AxiosError, AxiosInstance, AxiosRequestConfig, CancelTokenSource } from 'axios'
+import axios from 'axios'
+import { HTTP_METHODS } from '../../constants'
+import { getError, parseResponse } from './parse'
+import { config } from '~/configs'
+import type { RequestOptions } from '~/types/models/requestOptions'
+
+const TIMEOUT = 180000
+const { CancelToken } = axios
+const { API_BASE_URL } = config
+const axiosInstance = axios.create({
+  baseURL: API_BASE_URL,
+  timeout: TIMEOUT,
+})
+const axiosInstanceSource = CancelToken.source()
+
+export function setAxiosRequestConfig(
+  api: AxiosInstance, source: CancelTokenSource, methodType: string, url: string, options?: RequestOptions,
+) {
+  const requestConfig = merge({
+    url,
+    cancelToken: source.token,
+    method: methodType,
+  }, options)
+
+  // eslint-disable-next-line no-console
+  console.log(requestConfig)
+
+  return api(requestConfig as AxiosRequestConfig)
+}
+
+/**
+ * Attach common codes before and after api call.
+ * 1. Add cancel token for cancelling all requests.
+ * 2. Parse basic response
+ * @param {object} api
+ * @param {object} source
+ * @param {function} parse
+ * @returns {*}
+ */
+export function getHttpMethodsWithCancel(
+  api = axiosInstance,
+  source = axiosInstanceSource,
+  parse = parseResponse,
+) {
+  const getApiPromise = (methodType: string, url: string, options?: RequestOptions) =>
+    setAxiosRequestConfig(api, source, methodType, url, options)
+      .then(parse)
+      .catch((error: AxiosError) => {
+        getError(error)
+      })
+
+  return {
+    get(url: string, options?: RequestOptions) {
+      return getApiPromise(HTTP_METHODS.GET, url, options)
+    },
+    post(url: string, options?: RequestOptions) {
+      return getApiPromise(HTTP_METHODS.POST, url, options)
+    },
+    put(url: string, options?: RequestOptions) {
+      return getApiPromise(HTTP_METHODS.PUT, url, options)
+    },
+    /**
+     * Axios's delete accepts url and configs only.
+     * If you want to send data with delete, use configs.data
+     * @see https://github.com/axios/axios/issues/897#issuecomment-343715381
+     */
+    delete(url: string, options?: RequestOptions) {
+      return getApiPromise(HTTP_METHODS.DELETE, url, options)
+    },
+    cancelAPIs() {
+      source.cancel('API is canceled by cancelAPIs')
+    },
+  }
+}
+
+export default getHttpMethodsWithCancel()

src/api/base/parse.ts

@@ -0,0 +1,33 @@
+import type { AxiosError, AxiosResponse } from 'axios'
+import {
+  ERROR_CODE,
+  HTTP_STATUS_CODE,
+} from '../../constants'
+import type { ResponseModel } from '~/types/models/responseModel'
+
+export const getError = (responseError: AxiosError) => {
+  const { code: statusCode, response } = responseError
+  const errorResponse = response as ResponseModel
+
+  // add API HTTP Status Code based Error Type
+  if (HTTP_STATUS_CODE.TEST === Number(statusCode)) {
+    // TODO check Error Code
+    if (ERROR_CODE.TEST_CODE === Number(errorResponse.errorCode)) {
+      // add API Error Code based Error Type
+    }
+  }
+
+  // eslint-disable-next-line no-console
+  console.log(errorResponse)
+
+  return new Error(errorResponse.errorCode)
+}
+
+export const parseResponse = (response: AxiosResponse) => {
+  const responseData: ResponseModel = response.data
+
+  // eslint-disable-next-line no-console
+  console.log(responseData)
+
+  return responseData.data
+}

src/configs/index.ts

@@ -0,0 +1,3 @@
+export const config = {
+  API_BASE_URL: import.meta.env.VITE_API_BASE_URL,
+}

src/constants/httpStatus.ts

@@ -0,0 +1,17 @@
+export const HTTP_METHODS = {
+  GET: 'get',
+  POST: 'post',
+  PUT: 'put',
+  DELETE: 'delete',
+}
+
+export const HTTP_STATUS_CODE = {
+  OK: 200,
+  TEST: 999,
+  // TODO : add API Error Status Code setting
+}
+
+export const ERROR_CODE = {
+  TEST_CODE: 9991,
+  // TODO : add API Error Code setting
+}

src/constants/index.ts

@@ -0,0 +1 @@
+export * from './httpStatus'

src/env.d.ts

@@ -2,6 +2,7 @@
 
 interface ImportMetaEnv {
   readonly VITE_TEST: string
+  readonly VITE_API_BASE_URL: string
 }
 
 interface ImportMeta {

src/pages/index.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import api from '~/api/base'
+
 const name = ref('')
 
 const router = useRouter()
@@ -9,6 +11,10 @@ const go = () => {
 
 const testEnv = import.meta.env.VITE_TEST
 const initNum = 1
+
+api.get('https://gorest.co.in/public/v1/users')
+api.post('https://gorest.co.in/public/v1/users')
+
 </script>
 
 <template>

src/types/models/requestOptions.ts

@@ -0,0 +1,6 @@
+// Example API Request Options
+export type RequestOptions<D = any> = {
+  url: string
+  data?: D
+  params?: any
+}

src/types/models/responseModel.ts

@@ -0,0 +1,7 @@
+// Example API Response Model
+export type ResponseModel = {
+  data?: any
+  success?: boolean
+  errorCode?: string
+  errorMessage?: string
+}