[Init] migrate to a new repository

Author: youncccat

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/preset-env"],
+  "plugins": ["@babel/plugin-transform-runtime"]
+}

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+yarn-error.log

example/configs/sever-config.json

@@ -0,0 +1,6 @@
+{
+  "baseUrl": "api.github.com",
+  "port": 80,
+  "protocol": "https",
+  "mode": "prod"
+}

example/js/github-service.js

@@ -0,0 +1,14 @@
+import {http} from './http/http-service'
+
+export class GitHubService {
+  getUserDetail(name) {
+    return http.get(`/users/${name}`)
+  }
+
+  // Request to an incorrect addr
+  async getWhatever() {
+    const res = await http.get('/foo')
+
+    res.expect(() => "This addr cannot be reached!").success(() => "impossible!")
+  }
+}

example/js/http/http-service.js

@@ -0,0 +1,25 @@
+import {HTTPRequestFactory} from '../../..'
+import ServerConfig from '../../configs/sever-config.json'
+import {ReqLogger} from './interceptors/req-logger'
+import {ResLogger} from './interceptors/res-logger'
+import {ResErrorCatcher} from './interceptors/res-error-catcher'
+
+export class HTTPFactory extends HTTPRequestFactory {
+  configure({interceptor, serverConfigure}) {
+    serverConfigure.setConfig(ServerConfig)
+
+    interceptor.use([
+      ReqLogger,
+      ResLogger,
+      ResErrorCatcher
+    ])
+  }
+
+  errorInteract(errMsg, err) {
+    console.info(err)
+  }
+}
+
+const httpFactory = new HTTPFactory()
+
+export const http = httpFactory.create()

example/js/http/interceptors/req-logger.js

@@ -0,0 +1,7 @@
+export class ReqLogger {
+  onRequest(config) {
+    console.info("REQ LOG: ===> ", JSON.stringify(config))
+
+    return config
+  }
+}

example/js/http/interceptors/res-error-catcher.js

@@ -0,0 +1,7 @@
+export class ResErrorCatcher {
+  catchRes(err) {
+    console.info("Error: ", err)
+
+    throw err
+  }
+}

example/js/http/interceptors/res-logger.js

@@ -0,0 +1,7 @@
+export class ResLogger {
+  onResponse(res){
+    // The res is an raw Axios response, so if u wanna get data when u using it,
+    // u need to return data of res from res interceptor
+    return res.data
+  }
+}

example/js/index.js

@@ -0,0 +1,2 @@
+require("@babel/register")
+require("./main.js")

example/js/main.js

@@ -0,0 +1,18 @@
+import {GitHubService} from './github-service';
+
+const MOCK_USERNAME = 'youncccat';
+
+async function main() {
+  // The service might inject in class as well as bound a certain variable using
+  // DI lib that implemented by metadata in particular condition
+  const githubService = new GitHubService();
+  const res = await githubService.getUserDetail(MOCK_USERNAME);
+
+  const {data: avatarURL} = res
+    .expect(() => `Cannot access ${MOCK_USERNAME} information`)
+    .pipe(data => data?.avatar_url);
+
+  console.info(`${MOCK_USERNAME}'s avatar is ${avatarURL}`);
+}
+
+main();

example/ts/src/configs/sever-config.json

@@ -0,0 +1,6 @@
+{
+  "baseUrl": "api.github.com",
+  "port": 80,
+  "protocol": "https",
+  "mode": "prod"
+}

example/ts/src/http/http-service.ts

@@ -0,0 +1,30 @@
+import {
+  HTTPModule,
+  HTTPFactory,
+  RequestHook,
+  HTTPMethod,
+  ResValueArea,
+} from '../../../..';
+import ServerConfig from '../configs/sever-config.json';
+import {RequestLogger} from './interceptors/request-logger.interceptor';
+
+@HTTPModule({
+  server: ServerConfig,
+  interceptors: [RequestLogger],
+})
+export class AppModule implements RequestHook {
+  beforeRequest() {
+    console.info('before request');
+  }
+  afterResponse() {
+    console.info('after response');
+  }
+}
+
+const http = HTTPFactory.create(AppModule);
+
+(async () => {
+  const res = await http.get('/users/youncccat');
+
+  // console.info(res);
+})();

example/ts/src/http/interceptors/request-logger.interceptor.ts

@@ -0,0 +1,11 @@
+import {HTTPRequestInterceptor, AxiosRequestConfig} from '../../../../..';
+
+export class RequestLogger implements HTTPRequestInterceptor {
+  onRequest(
+    config: AxiosRequestConfig,
+  ): AxiosRequestConfig | Promise<AxiosRequestConfig> {
+    console.info('request ===> ', config.url);
+
+    return config;
+  }
+}

example/ts/src/index.ts

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "rootDir": "src",
+    "lib": ["dom", "esnext"],
+    "outDir": "dist",
+    "types": ["node"],
+    "declaration": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "emitDecoratorMetadata":true,
+    "experimentalDecorators": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/**/*"]
+}

example/ts/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "name": "@wizardoc/http-request",
+  "version": "1.3.1",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "dependencies": {
+    "axios": "^0.19.2",
+    "reflect-metadata": "^0.1.13"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "@babel/plugin-transform-runtime": "^7.12.1",
+    "@babel/preset-env": "^7.12.7",
+    "@babel/register": "^7.12.1",
+    "@types/axios": "^0.14.0",
+    "babel-plugin-dynamic-import-node": "^2.3.3"
+  }
+}

package.json

@@ -0,0 +1,2 @@
+export * from 'axios';
+export * from './lib';

src/index.ts

@@ -0,0 +1,172 @@
+import {AxiosError, AxiosStatic} from 'axios';
+
+import {ErrorInteractProcessor, ErrorMessage} from './error';
+
+type Request<R = any> = () => R;
+
+export type Response<R = any> = Promise<ResValueArea<R>>;
+
+type Requests<R> = {
+  [index in HttpType]: Request<R>;
+};
+
+interface Doer<R> {
+  Do(): Response<R>;
+}
+
+export type ResValueArea<R = any> = Expectable<R> &
+  Successable<R> &
+  Result<R> &
+  Pipable<R>;
+
+export type ExpectableCB = (err: AxiosError) => ErrorMessage;
+
+export interface Expectable<R> {
+  expect: OnExpect<R>;
+}
+
+export type OnExpect<R> = (cb?: ExpectableCB) => ResValueArea<R>;
+
+export interface Successable<R> {
+  success: OnSuccess<R>;
+}
+
+export interface Pipable<R> {
+  pipe: OnSuccess<R>;
+}
+
+export type OnSuccess<R = any> = (cb: OnSuccessCB<R>) => ResValueArea<R>;
+export type OnSuccessCB<R, T = any> = (data: R | undefined) => T;
+
+export interface Result<R> extends Successable<R> {
+  data?: R;
+  ok: boolean;
+}
+
+export type ExpectFn = () => string | void;
+export type SimpleHTTPMethod = 'GET' | 'HEAD';
+export type ComplexHTTPMethod = 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+export type HTTPMethod = SimpleHTTPMethod | ComplexHTTPMethod;
+export type HttpType = 'SimpleHTTPMethod' | 'ComplexHTTPMethod';
+
+interface DispatchPayload<T> {
+  method: HTTPMethod;
+  path: string;
+  data?: T;
+  headers?: any;
+}
+
+export interface HTTPClientOptions {
+  addr: string;
+  axios: AxiosStatic;
+  catcher: ErrorInteractProcessor;
+}
+
+export enum ContentType {
+  Form = 'application/x-www-form-urlencoded',
+}
+
+export interface HTTPClient {
+  create<T, R>(type: HttpType, payload: DispatchPayload<T>): Doer<R>;
+}
+
+export class BrowserClient {
+  constructor(private options: HTTPClientOptions) {}
+
+  create<T, R>(type: HttpType, payload: DispatchPayload<T>): Doer<R> {
+    const {path, data, headers, method} = payload;
+    const lowerCaseMethod = method.toLowerCase();
+
+    const requests: Requests<R> = {
+      ComplexHTTPMethod: () =>
+        this.options.axios[lowerCaseMethod]<R>(this.join(path), data || {}, {
+          headers: {
+            'Content-Type': ContentType.Form,
+            ...headers,
+          },
+        }),
+      SimpleHTTPMethod: () =>
+        this.options.axios[lowerCaseMethod]<R>(this.join(path), {
+          params: data,
+          headers: {
+            ...headers,
+          },
+        }),
+    };
+
+    return {
+      Do: () => this.Do<R>(() => requests[type]()),
+    };
+  }
+
+  private Do<R>(request: Request<R>): Response<R> {
+    let err: AxiosError | undefined;
+    let data: R | undefined;
+
+    const sendRequest = async (): Promise<ResValueArea<R>> => {
+      try {
+        data = await request();
+      } catch (e) {
+        err = e;
+      }
+
+      const valueArea: ResValueArea<R> = {
+        data,
+        ok: !err,
+        success: onSuccuss,
+        expect: onExpect,
+        pipe,
+      };
+      const that = this;
+
+      function pipe(cb: OnSuccessCB<R>): ResValueArea {
+        return {
+          ...valueArea,
+          data: cb(data),
+        };
+      }
+
+      function onSuccuss(cb: OnSuccessCB<R>): ResValueArea {
+        return {
+          ...valueArea,
+          data: err ? data : cb(data),
+        };
+      }
+
+      function onExpect(cb: ExpectableCB): ResValueArea {
+        if (err) {
+          const errMsg = cb(err);
+
+          if (errMsg !== undefined || errMsg !== null) {
+            that.options.catcher(errMsg, err);
+          }
+        }
+
+        return valueArea;
+      }
+
+      return valueArea;
+    };
+
+    return sendRequest();
+  }
+
+  private join(path: string): string {
+    if (path.startsWith('http')) {
+      return path;
+    }
+
+    const parsedPath = path.replace(/^\/(.*)/, (_, cap) => cap);
+
+    return `${this.options.addr}${parsedPath}`;
+  }
+}
+
+const noopFn: any = () => {};
+export const noop: ResValueArea = {
+  success: noopFn,
+  expect: noopFn,
+  data: undefined,
+  ok: false,
+  pipe: noopFn,
+};

src/lib/core/client.ts

@@ -0,0 +1,24 @@
+import {AxiosError} from 'axios';
+
+export enum ErrorOperates {
+  GLOBAL_PROCESS,
+}
+
+export type ErrorMessage = string | ErrorOperates | void;
+
+export type ErrorInteractProcessor = (errMsg: ErrorMessage, err: AxiosError) => void;
+
+export interface ErrorInteractModule {
+  errorInteract: ErrorInteractProcessor;
+}
+
+export const isErrorInteractModule = (module: any): module is ErrorInteractModule =>
+  !!module.errorInteract;
+
+export const getErrorInteractFromModule = (module: any): ErrorInteractProcessor => {
+  if (!isErrorInteractModule(module)) {
+    return () => {};
+  }
+
+  return module.errorInteract;
+};

src/lib/core/error.ts

@@ -0,0 +1,3 @@
+export * from './client';
+export * from './error';
+export * from './interceptor';