sg-resource v2.0.4
sg-resource
一个网络资源管理工具。使用 HTTP 协议请求,支持Vue、React,支持 SSR。
安装
npm i sg-resource
信息管理
服务站点管理
- system字段可配置多个环境(DEV、SIT、UAT、PROD等),"env"字段指定环境(必填),使用 runtime 字段选择其中一个环境。在每个环境里通过hosts字典配置多个服务地址,各环境hosts字典的key保持一致。
// site.config.js
// @ts-check
/// <reference path="../typings/global.d.ts" />
(function() {
const /** @type {import("sg-resource").ISiteConfig} */ SITE_CONFIG = {
system: [{
env: "DEV",
remote: {
hosts: {
user: "http://127.0.0.1:8080/web-api",
},
},
local: {},
entrance: "",
}, {
env: "SIT",
remote: {
hosts: {
user: "http://127.0.0.1:8080/web-api",
},
},
local: {},
entrance: "",
}, ],
runtime: "DEV",
};
// 通过全局get方法导出
if (typeof window === "object") {
window.getSiteConfig = () => SITE_CONFIG;
}
if (typeof global === "object") {
global.getSiteConfig = () => SITE_CONFIG;
}
if (typeof module === "object") {
module.exports = {
SITE_CONFIG
};
}
})();
- system元素各字段配置的详情
/**
* 某一个站点配置
*/
export interface ISite {
/**
* 环境标识
*/
env: "DEV" | "SIT" | "UAT" | "PROD";
/**
* 远端服务器配置
*/
remote: {
/**
* 服务器地址列表
*/
hosts: Record<string, IHost | string>;
/**
* 默认协议,服务器地址中不设置可继承该设置
*/
protocol?: string;
};
/**
* 本地服务器配置
*/
local: {
/**
* 协议
*/
protocol?: string;
/**
* 主机域名或ip地址
*/
hostname?: string;
/**
* 端口占用
*/
port?: number;
/**
* 发布路径
*/
publicPath?: string;
/**
* 附件路径,可以是本地服务目录,或远程地址
*/
assetsPath?: string;
};
/**
* 自定义
*/
custom?: Record<string, any>;
/**
* 第三方登录入口
*/
entrance?: string;
/**
* 统计服务地址
*/
sensor?: string;
/**
* 接口加密盐
*/
salt?: string;
}
/**
* 主机信息对象
* */
interface IHost {
url: string;
/**
* 配合web server解决跨域,地址的域信息部分将被替换为客户端地址。
*/
cors?: boolean;
}
- site.config.js引入方式: 1) 在CSR当作静态资源引入
<script src="/public/site.config.js"></script>
2) 在SSR模块式引入
// js
const {
SITE_CONFIG
} = require("./config/site.config");
const currentConfig = SITE_CONFIG.system.find(
(item) => item.env === SITE_CONFIG.runtime,
);
// ts
import "../config/site.config";
let siteConfig: ISiteConfig = {
system: [],
runtime: "DEV"
};
if (getSiteConfig) {
siteConfig = getSiteConfig();
}
const config = siteConfig.system.find(
(item) => item.env === siteConfig.runtime,
);
接口配置管理
使用 host 字段选择服务目标(使用泛型约束)
// api.config.ts
export const apiConfig: IApiConfig<"user"> = {
post: {
login: { host: "user", path: "/login" },
},
get: {},
};
访问接口
创建一个基础类并继承基础类
- 创建基础类在构造方法中调用初始化方法初始化 sg-resource,自定义 ResultInfo 对象用来描述接口返回数据的包装类
// base.serv.ts
import {
apiConfig
} from "@/app/config/api.config";
import {
ISiteConfig,
ProxyHttp,
SGResource
} from "sg-resource";
import {
ResultInfo
} from "../domain/ResultInfo";
export class BaseService {
proxyHttp: ProxyHttp;
constructor() {
this.proxyHttp = SGResource.ensureInitialized(getSiteConfig(), apiConfig, {
headers: () => {
const headers: any = {};
let token = "88";
if (token) {
headers["accessToken"] = token;
}
return headers;
},
diagnoseResponse: (config) => {
if (config.data) {
const result: ResultInfo = config.data;
if (result.status === 0) {
config.data = result.data;
}
}
return config;
},
});
}
}
- 继承基础类后使用this.proxyHttp对象中的方法得到服务能力,参数apiKey对应接口配置管理中的key定义
// user.serv.ts
import { BaseService } from "./base.serv";
export class UserService extends BaseService {
constructor() {
super();
}
login(userName: string, password: string): Promise<any> {
return this.proxyHttp.post("login", { userName, password });
}
}
使用service类
// 在你需要的
const userService = new UserService();
userService.login("sean", "666666").then(data=>{
// store info of user and to home
}).catch(console.log);
在ts中你可能需要添加类型定义
// global.d.ts
import { ISiteConfig } from "sg-resource";
declare global {
interface Window {
getSiteConfig?: () => ISiteConfig;
}
const getSiteConfig: (() => ISiteConfig) | undefined;
namespace NodeJS {
interface Global {
getSiteConfig?: () => ISiteConfig;
}
}
}
接口文档
- 主机配置管理
- 接口配置管理
- 初始化方法
- http 请求代理
主机配置
# remote
- 类型:{ hosts: { key: string: string | { url: string; cors?: boolean }}; protocol?: string }
- 详细:remote 用于配置接口服务器的访问地址、首路径。hosts 字段用于配置一组主机地址,一般对应一个服务,map 类型,其 key 用于检索识别主机,value 类型可以是字符串或对象。当为字符串时应符合 URI 规范,形式如下:
URI = scheme:[//authority]path
authority = [userinfo@]host[:port]
可以将 authority 置空,仅保留“//”,则表示使用客户端域名和端口,用以解决 CORS。
当是对象时,可使用 cors 字段明确标记此地址客户端 cors 解决方案为弃用配置的域,改为本地域,url 可写全,在符合规范的前提下 authority 内容可随意填充。
protocol 字段可选为全局设置协议,当设置了此字段后可以不设置 host 的 url 的协议部分,会继承全局协议,如:“//10.0.0.1:8080/user-api/”
- 示例:
{
remote: {
hosts: {
user: {
url: "//10.0.0.1:8080/user-api",
cors: true
},
support: "https://10.0.0.1:8080/support-api",
},
}
}
# local
- 类型:{ protocol?: string; hostname?: string; port?: number; publicPath: string }
- 详细:local 为开发服务器或服务器端渲染服务器配置本地域名、端口、发布目录。
接口配置
# post
- 类型:{ key: string: { host: string; path: string } }
- 详细:post 定义为 http 的一组 post 请求。为 map 类型,key 用于检索,value 类型为对象,其 host 字段为主机配置中的 hosts 对象的 key,用于选取接口主机地址;path 字段为此接口服务内部访问路径。
- 示例:
post: {
login: {
host: "user",
path: "/login"
},
},
另有 get、put、delete、form、modules 配置与 post 类似就不做赘述
初始化方法
初始化并返回一个 ProxyHttp 对象实例。
# SGResource.ensureInitialized(apiConfig: IApiConfig, siteConfig: ISiteConfig, options?: IInterceptorsOptions): ProxyHttp;
可选项定义:
IInterceptorsOptions {
/**
* 自定义请求头
*/
headers ? : () => Record < string, string | null > ;
/**
* 返回值拦截处理
*/
diagnoseResponse ? : (config: AxiosResponse < any > ) => AxiosResponse < any > ;
}
ProxyHttp 对象的实例方法:
# post(apiKey: string; params?: { key: string: string }; pathParams?: string[]; options: { headers?: any } = {})
- 示例:
login(userName: string, password: string): Promise < any > {
return this.proxyHttp.post("login", {
userName,
password
});
}
- 实例方法定义
/**
* 代理get请求
* @param apiKey config定义的接口名
* @param params 请求参数
* @param pathParams 路径参数
* @param options 可选参数,包括请求头参数
*/
get(apiKey: string, params?: any, pathParams?: string[], options?: {
headers?: any;
}): Promise<any>;
/**
* 代理post请求
* @param apiKey config定义的接口
* @param data 请求参数
* @param pathParams 路径参数
* @param options 可选参数,包括请求头参数
*/
post(apiKey: string, data?: any, pathParams?: string[], options?: {
headers?: any;
}): Promise<any>;
/**
* 代理delete请求
* @param api config定义的接口
* @param pathParams 请求参数
*/
delete(apiKey: string, pathParams?: string[], options?: {
headers?: any;
}): Promise<any>;
/**
* 代理put请求
* @param apiKey config定义的接口名
* @param data 请求参数
*/
put(apiKey: string, data?: any, pathParams?: string[], options?: {
headers?: any;
}): Promise<any>;
/**
* 表单提交
* @param api 接口
* @param form 表单对象
*/
form(apiKey: string, form: FormData, pathParams?: string[], options?: {
headers?: any;
}): Promise<any>;
/**
* 通过网络协议获取一组文件对象
* @param urls 文件url列表
* @param options 可选参数,包括请求头参数
*/
getFiles(urls: string[], options?: {
headers?: any;
}): Promise<File[]>;
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago