网络请求工具封装

西瓜皮儿 2023/7/5

# 网络请求工具

基于axios 1.4.0封装

路由跳转时，路径可能不是根路径，所以需要获取当前路径

export const getBaseUrl = () => {
  let baseurl = `${window.location.protocol}//${window.location.host}`;
  if (baseurl.match(/^\//g)) {
    baseurl = `${window.location.protocol}//${window.location.host}${baseurl}`;
  }
  return baseurl;
}
export function getBasePathName() {
  const a = document.createElement("a");
  a.href = getBaseUrl();
  let rt = a.pathname.match(/^\//g) ? a.pathname : `/${a.pathname}`;
  rt = rt.match(/\/$/g) ? rt : `${rt}/`;
  return rt;
}
 
        复制成功

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import fetch, { CancelToken } from "axios";
import { getBaseUrl } from "./urlPathTool";

const baseUrl = `${getBaseUrl()}/`;

const handleRequestError = (requestUrl: string, err: any) => {
  try {
    if (err && err.response) {
      if (err.response.data.code === 401) {
        // console.log("跳转到登陆页面")
      } else if (err.response.data.code === 500) {
        // console.log("跳转到服务器错误页面")
      }
      throw err;
    }
  } catch (err: any) {
    if (err.message === "Network Error") {
      // console.log("跳转到网络错误页面")
    }
  }
};

const commonRequest = async (
  method: string,
  path: string,
  arr: { params?: any; data?: any; cancelToken?: CancelToken }
) => {
  const options = {
    method,
    url: `${baseUrl}${path}`,
    ...arr,
  };

  try {
    const response = await fetch(options);
    // check服务器返回
    return response.data.data;
  } catch (err: any) {
    handleRequestError(path, err);
  }
};

export function get(url: string, params = {}, cancelToken?: CancelToken) {
  return commonRequest("get", url, { params, cancelToken });
}

export function post<T>(url: string, data = {}, cancelToken?: CancelToken): T {
  return commonRequest("post", url, { data: { ...data }, cancelToken }) as T;
}

export function put<T>(url: string, data = {}, cancelToken?: CancelToken): T {
  return commonRequest("put", url, { data: { ...data }, cancelToken }) as T;
}

export function del<T>(url: string, data = {}, cancelToken?: CancelToken): T {
  return commonRequest("delete", url, { data: { ...data }, cancelToken }) as T;
}
 
        复制成功

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

网络请求是普通函数，在组建外，所以错误页面跳转属于路由外跳转
基于history库
跳转函数

// utils/History/history.tsx
import { createBrowserHistory } from "history";

const history = createBrowserHistory();
export default history;
 
        复制成功

1
2
3
4
5

路由包装

// utils/History/HistoryRouter.tsx
import React from "react";
import type { History } from "history";
import type { BrowserRouterProps as NativeBrowserRouterProps } from "react-router-dom";
import { Router } from "react-router-dom";

export interface BrowserRouterProps
  extends Omit<NativeBrowserRouterProps, "window"> {
  history: History;
}

const BrowserRouter: React.FC<BrowserRouterProps> = (props) => {
  const { history, ...restProps } = props;
  const [state, setState] = React.useState({
    action: history.action,
    location: history.location,
  });

  React.useLayoutEffect(() => history.listen(setState), [history]);

  return (
    <Router
      {...restProps}
      location={state.location}
      navigationType={state.action}
      navigator={history}
    />
  );
};

export default React.memo(BrowserRouter);
 
        复制成功

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

路由使用

// App.tsx
const App: React.FC = () => {
  const { [STORAGE_THEME]: themeType } = useContext(ThemeContext);
  const Theme = { ...theme };
  Theme.palette.type = themeType;
  return (
    <Suspense>
      <BrowserRouter history={history}>
        <Elements />
      </BrowserRouter>
    </Suspense>
  );
};
 
        复制成功

1
2
3
4
5
6
7
8
9
10
11
12
13

路由跳转使用

import history from "./History/history";

const ROUTE_MESSAGE_LOGIN = `${getBasePathName()}login`;
history.replace(ROUTE_MESSAGE_LOGIN);
 
        复制成功

1
2
3
4

utils/webHistory.ts

import { createWebHistory } from "vue-router";

const webHistory = createWebHistory(import.meta.env.BASE_URL);
export default webHistory;
 
        复制成功

1
2
3
4

router/index.ts

import { createRouter } from "vue-router";
import ErrorView from "@/views/ErrorView/ErrorView.vue";
import webHistory from "@/utils/webHistory";

const router = createRouter({
	history: webHistory,
	routes: [
		{
			path: "/:w+",
			component: ErrorView,
		},
	],
});

export default router;
 
        复制成功

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 文件上传进度条

import axios, { AxiosProgressEvent } from "axios";
// 做进度条函数
const uploadProgress = (evt: AxiosProgressEvent, id: string) => {
  if (evt.progress && evt.total) {
    const percent = Math.round((evt.loaded * 100) / evt.total);
    setProgresses({ ...progresses, [id]: percent });
  }
};
const fileUpload = async (file: File) => {
  const url = `${getBaseUrl()}/${FILE_UPLOAD}`;
  const form = new FormData();
  const { fileInfo, cid } = file;
  if (fileInfo) {
    form.append("file", fileInfo);
    const option = {
      method: "post",
      url,
      data: form,
      onUploadProgress: (event: AxiosProgressEvent) =>
        uploadProgress(event, cid),
    };
    try {
      const result = await axios(option);
      uploadedFilesUrl.current = {
        ...uploadedFilesUrl.current,
        [cid]: result.data.data,
      };
    } catch (e) {
      setUploadFailed([...uploadFailed, cid]);
    }
  }
};
 
        复制成功

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

React Hooks