302 lines
10 KiB
TypeScript
302 lines
10 KiB
TypeScript
|
import deepMerge from '../function/deepMerge';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 请求配置项Meta类型定义
|
|||
|
|
*/
|
|||
|
|
export interface RequestMeta {
|
|||
|
|
toast?: boolean;
|
|||
|
|
loading?: boolean;
|
|||
|
|
originalData?: boolean;
|
|||
|
|
[key: string]: any;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 请求配置项类型定义
|
|||
|
|
*/
|
|||
|
|
export interface RequestConfig {
|
|||
|
|
baseUrl?: string;
|
|||
|
|
header?: Record<string, any>;
|
|||
|
|
method?: string;
|
|||
|
|
dataType?: string;
|
|||
|
|
responseType?: string;
|
|||
|
|
timeout?: number;
|
|||
|
|
meta?: RequestMeta;
|
|||
|
|
[key: string]: any;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 忽略的请求参数类型定义
|
|||
|
|
*/
|
|||
|
|
const IGNORE_REQUEST_KEYS = ['baseUrl', 'meta'];
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 请求拦截器类型定义
|
|||
|
|
*/
|
|||
|
|
export interface RequestInterceptor {
|
|||
|
|
request?: ((options: RequestOptions) => RequestOptions | false) | null;
|
|||
|
|
response?: ((response: any) => any | false) | null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 请求参数类型定义
|
|||
|
|
*/
|
|||
|
|
export interface RequestOptions {
|
|||
|
|
url: string;
|
|||
|
|
header: Record<string, any>;
|
|||
|
|
method: 'GET' | 'POST' | 'OPTIONS' | 'HEAD' | 'PUT' | 'DELETE' | 'TRACE' | 'CONNECT';
|
|||
|
|
data?: any;
|
|||
|
|
dataType?: string;
|
|||
|
|
responseType?: string;
|
|||
|
|
params?: Record<string, any>;
|
|||
|
|
complete?: (response: any) => void;
|
|||
|
|
meta?: RequestMeta;
|
|||
|
|
[key: string]: any;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export class Request {
|
|||
|
|
public config: RequestConfig;
|
|||
|
|
public interceptor: RequestInterceptor;
|
|||
|
|
public options?: RequestOptions;
|
|||
|
|
|
|||
|
|
constructor() {
|
|||
|
|
this.config = {
|
|||
|
|
baseUrl: '', // 请求的根域名
|
|||
|
|
header: {}, // 默认的请求头
|
|||
|
|
method: 'POST', // 请求方式
|
|||
|
|
dataType: 'json', // 设置为json，返回后uni.request会对数据进行一次JSON.parse
|
|||
|
|
responseType: 'text', // 此参数无需处理，因为5+和支付宝小程序不支持，默认为text即可
|
|||
|
|
timeout: 60000,
|
|||
|
|
meta: {
|
|||
|
|
originalData: true, // 是否在拦截器中返回服务端的原始数据，见文档说明
|
|||
|
|
toast: false, // 是否在请求出错时，弹出toast
|
|||
|
|
loading: false // 是否显示加载中
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
this.interceptor = {
|
|||
|
|
request: null,
|
|||
|
|
response: null
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
/**
|
|||
|
|
* 将全局配置合并到本次请求的 options 中
|
|||
|
|
* - 忽略 IGNORE_REQUEST_KEYS 中的字段（如 meta）
|
|||
|
|
* - 对 header 使用深合并（全局 header 为默认，options.header 优先）
|
|||
|
|
* - 对对象类型的字段尝试深合并，基础类型以 options 值优先
|
|||
|
|
* - 处理 baseUrl：若存在全局 baseUrl 且 options.url 非完整 url（非 http 开头），则合并成完整 URL
|
|||
|
|
*/
|
|||
|
|
private mergeGlobalConfigToOptions(options: RequestOptions): RequestOptions {
|
|||
|
|
const mergedOptions: RequestOptions = { ...options };
|
|||
|
|
for (const key of Object.keys(this.config)) {
|
|||
|
|
if (IGNORE_REQUEST_KEYS.includes(key)) {
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
const cfgVal = this.config[key];
|
|||
|
|
const optVal = options[key];
|
|||
|
|
|
|||
|
|
// 跳过未设置的全局配置
|
|||
|
|
if (cfgVal === undefined) continue;
|
|||
|
|
|
|||
|
|
// header 需要做深合并，且以 options.header 为准覆盖同名属性
|
|||
|
|
if (key === 'header') {
|
|||
|
|
mergedOptions.header = deepMerge(cfgVal || {}, optVal || {});
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 针对 method 等枚举字符串，优先使用 options 中的值，否则使用全局配置
|
|||
|
|
if (typeof cfgVal === 'string' || typeof cfgVal === 'number' || typeof cfgVal === 'boolean') {
|
|||
|
|
mergedOptions[key] = optVal !== undefined ? optVal : cfgVal;
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 对对象类型的配置（如自定义扩展）尝试做深合并
|
|||
|
|
if (typeof cfgVal === 'object' && !Array.isArray(cfgVal)) {
|
|||
|
|
mergedOptions[key] = deepMerge(cfgVal || {}, optVal || {});
|
|||
|
|
continue;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 其他类型，若 options 未传入则使用全局配置
|
|||
|
|
if (optVal === undefined) {
|
|||
|
|
mergedOptions[key] = cfgVal;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
// 如果存在 baseUrl，并且 options.url 为相对地址，则拼接成完整 url
|
|||
|
|
const baseUrl = this.config.baseUrl;
|
|||
|
|
if (
|
|||
|
|
baseUrl &&
|
|||
|
|
mergedOptions.url &&
|
|||
|
|
typeof mergedOptions.url === 'string' &&
|
|||
|
|
mergedOptions.url.indexOf('http') !== 0
|
|||
|
|
) {
|
|||
|
|
mergedOptions.url =
|
|||
|
|
baseUrl + (mergedOptions.url.indexOf('/') === 0 ? mergedOptions.url : `/${mergedOptions.url}`);
|
|||
|
|
}
|
|||
|
|
// 确保 url 存在，且为 string
|
|||
|
|
if (!mergedOptions.url) {
|
|||
|
|
mergedOptions.url = '';
|
|||
|
|
}
|
|||
|
|
return mergedOptions;
|
|||
|
|
}
|
|||
|
|
/**
|
|||
|
|
* 设置全局默认配置
|
|||
|
|
* @param customConfig 自定义配置
|
|||
|
|
*/
|
|||
|
|
setConfig(customConfig: Partial<RequestConfig>): void {
|
|||
|
|
this.config = deepMerge(this.config, customConfig);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* 主要请求部分
|
|||
|
|
* @param options 请求参数
|
|||
|
|
*/
|
|||
|
|
request<T = unknown>(options: RequestOptions): Promise<T> {
|
|||
|
|
// 合并 meta 配置，优先级：单次请求 > 全局
|
|||
|
|
const mergedMeta: RequestMeta = {
|
|||
|
|
...this.config.meta,
|
|||
|
|
...(options.meta || {})
|
|||
|
|
};
|
|||
|
|
// 让 options.meta 传递到拦截器
|
|||
|
|
options.meta = mergedMeta;
|
|||
|
|
options.url = options.url || '';
|
|||
|
|
options.params = options.params || {};
|
|||
|
|
// 将全局配置合并到本次请求 options 中（注意忽略一些特殊字段如 baseUrl/meta）
|
|||
|
|
options = this.mergeGlobalConfigToOptions(options);
|
|||
|
|
|
|||
|
|
if (this.interceptor.request && typeof this.interceptor.request === 'function') {
|
|||
|
|
const interceptorRequest = this.interceptor.request(options);
|
|||
|
|
if (!interceptorRequest) {
|
|||
|
|
// 返回一个处于pending状态中的Promise，来取消原promise，避免进入then()回调
|
|||
|
|
return new Promise(() => {});
|
|||
|
|
}
|
|||
|
|
this.options = interceptorRequest;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return new Promise<T>((resolve, reject) => {
|
|||
|
|
options.complete = (response: any) => {
|
|||
|
|
// 读取 meta 配置
|
|||
|
|
const meta = options.meta || this.config.meta || {};
|
|||
|
|
const originalData = meta.originalData ?? false;
|
|||
|
|
// 拦截器处理，加入request的配置参数
|
|||
|
|
response.config = options;
|
|||
|
|
if (originalData) {
|
|||
|
|
// 判断是否存在拦截器
|
|||
|
|
if (this.interceptor.response && typeof this.interceptor.response === 'function') {
|
|||
|
|
const resInterceptors = this.interceptor.response(response);
|
|||
|
|
// 如果拦截器不返回false，就将拦截器返回的内容给请求的then回调
|
|||
|
|
if (resInterceptors !== false) {
|
|||
|
|
resolve(resInterceptors);
|
|||
|
|
} else {
|
|||
|
|
// 如果拦截器返回false，意味着拦截器定义者认为返回有问题，直接接入catch回调
|
|||
|
|
reject(response);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 如果要求返回原始数据，就算没有拦截器，也返回最原始的数据
|
|||
|
|
resolve(response);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
if (response.statusCode === 200) {
|
|||
|
|
if (this.interceptor.response && typeof this.interceptor.response === 'function') {
|
|||
|
|
const resInterceptors = this.interceptor.response(response.data);
|
|||
|
|
if (resInterceptors !== false) {
|
|||
|
|
resolve(resInterceptors);
|
|||
|
|
} else {
|
|||
|
|
reject(response.data);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
// 如果不是返回原始数据(originalData=false)，且没有拦截器的情况下，返回纯数据给then回调
|
|||
|
|
resolve(response.data);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
reject(response);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
uni.request(options);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
get<T = unknown>(
|
|||
|
|
url: string,
|
|||
|
|
data: any = {},
|
|||
|
|
options: { header?: Record<string, any>; meta?: RequestMeta } = {}
|
|||
|
|
): Promise<T> {
|
|||
|
|
return this.request<T>({
|
|||
|
|
method: 'GET',
|
|||
|
|
url,
|
|||
|
|
data,
|
|||
|
|
header: options.header || {},
|
|||
|
|
meta: options.meta
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
post<T = unknown>(
|
|||
|
|
url: string,
|
|||
|
|
data: any = {},
|
|||
|
|
options: { header?: Record<string, any>; meta?: RequestMeta } = {}
|
|||
|
|
): Promise<T> {
|
|||
|
|
return this.request<T>({
|
|||
|
|
url,
|
|||
|
|
method: 'POST',
|
|||
|
|
data,
|
|||
|
|
header: options.header || {},
|
|||
|
|
meta: options.meta
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
put<T = unknown>(
|
|||
|
|
url: string,
|
|||
|
|
data: any = {},
|
|||
|
|
options: { header?: Record<string, any>; meta?: RequestMeta } = {}
|
|||
|
|
): Promise<T> {
|
|||
|
|
return this.request<T>({
|
|||
|
|
url,
|
|||
|
|
method: 'PUT',
|
|||
|
|
data,
|
|||
|
|
header: options.header || {},
|
|||
|
|
meta: options.meta
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
delete<T = unknown>(
|
|||
|
|
url: string,
|
|||
|
|
data: any = {},
|
|||
|
|
options: { header?: Record<string, any>; meta?: RequestMeta } = {}
|
|||
|
|
): Promise<T> {
|
|||
|
|
return this.request<T>({
|
|||
|
|
url,
|
|||
|
|
method: 'DELETE',
|
|||
|
|
data,
|
|||
|
|
header: options.header || {},
|
|||
|
|
meta: options.meta
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 插件化导出，支持 app.use(http, { interceptor })
|
|||
|
|
const httpInstance = new Request();
|
|||
|
|
|
|||
|
|
interface HttpPluginOptions {
|
|||
|
|
requestConfig?: Partial<RequestConfig>;
|
|||
|
|
interceptor?: RequestInterceptor;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 全局导出，支持 import { httpPlugin } from 'uview-pro'
|
|||
|
|
const httpPlugin = {
|
|||
|
|
install(app: any, options: HttpPluginOptions = {}) {
|
|||
|
|
if (options.interceptor) {
|
|||
|
|
const { request, response } = options.interceptor;
|
|||
|
|
if (request) httpInstance.interceptor.request = request;
|
|||
|
|
if (response) httpInstance.interceptor.response = response;
|
|||
|
|
}
|
|||
|
|
if (options.requestConfig) {
|
|||
|
|
httpInstance.setConfig(options.requestConfig);
|
|||
|
|
}
|
|||
|
|
app.config.globalProperties.$http = httpInstance;
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 全局导出，支持 import { http } from 'uview-pro'
|
|||
|
|
export { httpInstance as http };
|
|||
|
|
|
|||
|
|
// 插件化导出，支持 app.use(http, { interceptor })
|
|||
|
|
export default httpPlugin;
|