tsrntemp 1.2.0 → 1.2.2

package/README.md

@@ -2,7 +2,7 @@
 
 English | [简体中文](./README_zh-CN.md)
 
-## :arrow_forward: 用法
+## :arrow_forward: usage
 ```sh
 npx react-native init ProjectName --template tsrntemp
 ```
@@ -17,7 +17,7 @@ npx react-native init ProjectName --template tsrntemp
 
 `The default of this project is TS building, integrated routing, caching, request tool and icon tool`
 
-- 文件目录
+- file directory
  - src
   - src/assets`Static resource folder`
   - src/components`Public component folder`
@@ -27,6 +27,7 @@ npx react-native init ProjectName --template tsrntemp
   - src/route`Route the page folder`
   - src/types`Type statement folder`
   - src/utils`Tool Class Folders`
+  - src/requestUtils`Request tool base class`
 
 ### react-navigation
 - [Use reference](https://reactnavigation.org/docs/getting-started)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tsrntemp",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "Clean and minimalist React Native template for a quick start with TypeScript.",
   "scripts": {
     "test": "exit 0"
@@ -14,21 +14,30 @@
     "typescript",
     "jest",
     "template",
-    "boilerplate"
+    "boilerplate",
+    "react-native-typescript-template",
+    "react-native-template-typescript"
   ],
+  "engines": {
+    "node": ">=16"
+  },
   "author": {
     "name": "wangzelin",
-    "url": "https://juejin.cn/user/465848662767367?utm_source=gold_browser_extension"
+    "email": "447867010@qq.com"
   },
   "contributors": [
     {
       "name": "wangzelin",
-      "url": "https://juejin.cn/user/465848662767367?utm_source=gold_browser_extension"
+      "email": "447867010@qq.com"
     }
   ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "provenance": true
+  },
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/wanngzelin/RNTemplate/issues"
   },
   "homepage": "https://github.com/wanngzelin/RNTemplate#readme"
-}
+}

package/template/src/config/apiConfig.ts

@@ -0,0 +1,5 @@
+// 请求基基地值
+export const baseUrl = '';
+
+// 导出请求地址配置
+//export const apiCOnfig={}

package/template/src/config/index.ts

@@ -1,2 +1,3 @@
 export * from './color';
 export * from './routesConfig';
+export * from './apiConfig';

package/template/src/requestUtils/ApiService.ts

@@ -0,0 +1,68 @@
+/**
+ * 请求工具基类,支持传入泛型累，可提示返回数据类型
+ * 默认响应为ResponseData泛型，如后端返回格式不一致，可修改对应基类
+ */
+import {RequestOptionsInit} from 'umi-request';
+import {request} from './request';
+interface Page<T> {
+  hasNextPage: boolean;
+  hasPrevious: boolean;
+  list: T[];
+  pageIndex: number;
+  pageSize: number;
+  total: number;
+}
+
+interface ResponseData<T = any> {
+  data: T;
+  message: string;
+  status: number;
+  success: boolean;
+  timestamp: number;
+}
+
+interface HTTPConfig {
+  url: string;
+  opts?: RequestOptionsInit;
+}
+
+type List<T = any[]> = ResponseData<T[]>;
+type ResPage<T = any> = ResponseData<Page<T>>;
+
+export class ApiService {
+  static async get<T = any>(
+    url: string,
+    params?: RequestOptionsInit['params'],
+  ): Promise<ResponseData<T>> {
+    return await request.get<ResponseData<T>>(url, {params});
+  }
+
+  static async post<T = any>(
+    url: string,
+    data?: RequestOptionsInit['data'],
+  ): Promise<ResponseData<T>> {
+    return await request.post<ResponseData<T>>(url, {data});
+  }
+
+  static async postQuery<T = any>(
+    url: string,
+    params?: RequestOptionsInit['params'],
+  ): Promise<ResponseData<T>> {
+    return await request.post<ResponseData<T>>(url, {params});
+  }
+
+  static async delete<T = any>({
+    url,
+    opts,
+  }: HTTPConfig): Promise<ResponseData<T>> {
+    return await request.delete<ResponseData<T>>(url, opts);
+  }
+
+  static async page<T = any>({url, opts}: HTTPConfig): Promise<ResPage<T>> {
+    return await request.get<ResPage<T>>(url, opts);
+  }
+
+  static async list<T = any>({url, opts}: HTTPConfig): Promise<List<T>> {
+    return await request.get<List<T>>(url, opts);
+  }
+}

package/template/src/requestUtils/index.ts

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

package/template/src/requestUtils/request.ts

@@ -0,0 +1,80 @@
+//请求工具库
+/**
+ * 使用可参照https://www.npmjs.com/package/umi-request
+ */
+import {extend, ResponseError} from 'umi-request';
+import {Storage} from '@/utils';
+import {baseUrl} from '@/config';
+
+const codeMessage: Record<string, string> = {
+  '200': '服务器成功返回请求的数据。',
+  '201': '新建或修改数据成功。',
+  '202': '一个请求已经进入后台排队（异步任务）。',
+  '204': '删除数据成功。',
+  '400': '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
+  '401': '用户没有权限（令牌、用户名、密码错误）。',
+  '403': '用户得到授权，但是访问是被禁止的。',
+  '404': '发出的请求针对的是不存在的记录，服务器没有进行操作。',
+  '406': '请求的格式不可得。',
+  '410': '请求的资源被永久删除，且不会再得到的。',
+  '422': '当创建一个对象时，发生一个验证错误。',
+  '500': '服务器发生错误，请检查服务器。',
+  '502': '网关错误。',
+  '503': '服务不可用，服务器暂时过载或维护。',
+  '504': '网关超时。',
+};
+/**
+ * 异常处理程序
+ */
+const errorHandler = (error: ResponseError) => {
+  const {response} = error;
+  console.log(error);
+
+  if (response && response.status) {
+    const {status, url} = response;
+    console.log(
+      `请求错误 ${status}: ${url},message:${codeMessage[status + '']}`,
+    );
+  } else if (!response) {
+    console.log('您的网络发生异常，无法连接服务器');
+  }
+  return response;
+};
+
+const request = extend({
+  prefix: baseUrl,
+  timeout: 1000 * 60,
+  errorHandler,
+});
+
+request.use(
+  async (ctx, next) => {
+    const {req} = ctx;
+    const {options} = req;
+    const Authorization = Storage.getString('Authorization');
+    ctx.req.options = {
+      ...options,
+      headers: {
+        ...options.headers,
+        DeviceType: 'APP',
+        Authorization: Authorization ?? '',
+      },
+    };
+    await next();
+  },
+  {global: true},
+);
+
+request.interceptors.response.use(async (res: Response) => {
+  const resopnse = await res.clone().json();
+  if (res.ok && !resopnse.success) {
+    console.log(resopnse?.message || '网络故障');
+    // 如果是登录过期，清除缓存，重载app
+    if (resopnse?.status === 407) {
+      Storage.clearAll();
+    }
+  }
+  return res;
+});
+
+export {request};

package/template/src/utils/index.ts

@@ -1,2 +1,2 @@
 export * from './storage';
-export * from './request';
+export * from '../requestUtils/request';

package/template/src/utils/storage.ts

@@ -1,3 +1,5 @@
 import {MMKV} from 'react-native-mmkv';
 
-export default new MMKV();
+const Storage = new MMKV();
+
+export {Storage};