- 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
+}