http封装

.env.example

@@ -0,0 +1 @@
+REACT_APP_URL=

.gitignore

@@ -23,4 +23,9 @@ yarn-debug.log*
 yarn-error.log*
 
 yanr.lock
-package-lock.json
+package-lock.json
+
+.env
+.env.local
+.env.production
+.env.development

src/api/categories.ts

@@ -1,9 +0,0 @@
-import axios from "axios";
-
-export const getCategoriesAsync = (params: any) =>
-  axios.get("/categroy/findCategroy", {
-    params: params,
-  });
-
-export const addCategoriesAsync = (data: any) =>
-  axios.post("/categroy/addCategroy", data);

src/api/index.ts

@@ -0,0 +1,3 @@
+import * as login from "./login";
+
+export {login}

src/api/internal/httpClient.ts

@@ -0,0 +1,124 @@
+import axios, { Axios, AxiosResponse } from "axios";
+import { getToken, clearToken } from "../../utils/index";
+
+export class HttpClient {
+  axios: Axios;
+
+  constructor(url: string) {
+    this.axios = axios.create({
+      baseURL: url,
+      timeout: 15000,
+      withCredentials: false,
+    });
+
+    //拦截器注册
+    this.axios.interceptors.request.use(
+      (config) => {
+        const token = getToken();
+        token && (config.headers.Authorization = "Bearer " + token);
+        return config;
+      },
+      (err) => {
+        return Promise.reject(err);
+      }
+    );
+
+    this.axios.interceptors.response.use(
+      (response: AxiosResponse) => {
+        let status = response.data.status; //HTTP状态码
+        let code = response.data.code; //业务返回代码
+
+        console.log("response", status, code);
+
+        if (status === 200 && code === 0) {
+          return Promise.resolve(response);
+        }
+
+        if (status === 401) {
+          clearToken();
+          // 跳转到登录界面
+        } else if (status === 404) {
+          // 跳转到404页面
+        } else if (status === 403) {
+          // 跳转到无权限页面
+        } else if (status === 500) {
+          // 跳转到500异常页面
+        }
+        return Promise.reject(response);
+      },
+      // 当http的状态码非0
+      (error) => {
+        let httpCode = error.response.status;
+        if (httpCode === 401) {
+          //未登录
+          clearToken();
+          return;
+        } else if (httpCode === 403) {
+          //无权限
+          return;
+        }
+        return Promise.reject(error.response);
+      }
+    );
+  }
+
+  get(url: string, params: object) {
+    return new Promise((resolve, reject) => {
+      this.axios
+        .get(url, {
+          params: params,
+        })
+        .then((res) => {
+          resolve(res.data);
+        })
+        .catch((err) => {
+          reject(err.data);
+        });
+    });
+  }
+
+  destroy(url: string) {
+    return new Promise((resolve, reject) => {
+      this.axios
+        .delete(url)
+        .then((res) => {
+          resolve(res.data);
+        })
+        .catch((err) => {
+          reject(err.data);
+        });
+    });
+  }
+
+  post(url: string, params: object) {
+    return new Promise((resolve, reject) => {
+      this.axios
+        .post(url, params)
+        .then((res) => {
+          resolve(res.data);
+        })
+        .catch((err) => {
+          reject(err.data);
+        });
+    });
+  }
+
+  put(url: string, params: object) {
+    return new Promise((resolve, reject) => {
+      this.axios
+        .put(url, params)
+        .then((res) => {
+          resolve(res.data);
+        })
+        .catch((err) => {
+          reject(err.data);
+        });
+    });
+  }
+}
+
+const APP_URL = process.env.REACT_APP_URL || "";
+
+const client = new HttpClient(APP_URL);
+
+export default client;

src/api/login.ts

@@ -0,0 +1,19 @@
+import client from "./internal/httpClient";
+
+export function login(
+  email: string,
+  password: string,
+  captchaKey: string,
+  captchaVal: string
+) {
+  return client.post("/backend/v1/auth/login", {
+    email: email,
+    password: password,
+    captcha_key: captchaKey,
+    captcha_val: captchaVal,
+  });
+}
+
+export function logout() {
+  return client.post("/backend/v1/auth/logout", {});
+}

src/index.tsx

@@ -3,7 +3,6 @@ import ReactDOM from "react-dom/client";
 import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
-import "./utils/axios";
 
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement

src/pages/home/HomePage.tsx

@@ -1,8 +1,13 @@
-import React from "react";
+import React, { useEffect } from "react";
 import styles from "./HomePage.module.css";
 import { Header, Footer } from "../../compenents";
+import { login } from "../../api/index";
 
 export const HomePage: React.FC = () => {
+  useEffect(() => {
+    login.login("1@qq.com", "123123", "1", "2");
+  }, []);
+
   return (
     <>
       <Header></Header>

src/utils/axios.ts

@@ -1,12 +0,0 @@
-import axios from "axios";
-
-axios.defaults.timeout = 10000;
-axios.defaults.headers.Authorization = "Bearer ";
-axios.defaults.headers.common["meedu-platform"] = "backend";
-axios.defaults.baseURL = "https://dev-local.meedu.vip/";
-
-// 响应拦截器
-axios.interceptors.response.use(
-  (res) => res.data, // 拦截到响应对象，将响应对象的 data 属性返回给调用的地方
-  (err) => Promise.reject(err)
-);

src/utils/index.ts

@@ -0,0 +1,11 @@
+export function getToken(): string {
+  return window.localStorage.getItem("playedu-backend-token") || "";
+}
+
+export function setToken(token: string) {
+  window.localStorage.setItem("playedu-backend-token", token);
+}
+
+export function clearToken() {
+    window.localStorage.removeItem("playedu-backend-token");
+  }